MINOR: create BIMDataInputOutlined component and add documentation (#329

) * create BIMDataInputOutlined component and add documentation * add missing props documentation * fix BIMDataInputOutlined cursor * fix documentation * use optional chaining
bimdata · Dec 15, 2023 · 3ecf39f · 3ecf39f
1 parent 9998126
commit 3ecf39f
Show file tree

Hide file tree

Showing 9 changed files with 695 additions and 44 deletions.
diff --git a/src/BIMDataComponents/BIMDataInputOutlined/BIMDataInputOutlined.vue b/src/BIMDataComponents/BIMDataInputOutlined/BIMDataInputOutlined.vue
@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="bimdata-input-outlined"
+    :class="{
+      error,
+      success,
+      disabled,
+      loading,
+      empty:
+        modelValue === undefined || modelValue === null || modelValue === '',
+    }"
+    :style="style"
+  >
+    <fieldset>
+      <label v-if="label" :for="`bimdata-input-outlined-${uuid}`" class="m-b-6"
+        ><slot name="label">Label here</slot></label
+      >
+      <div class="flex items-center">
+        <slot name="prefix"></slot>
+        <div class="bimdata-input-outlined__container">
+          <div class="bimdata-input-outlined__container__prefix-inner">
+            <slot name="prefixInner"></slot>
+          </div>
+          <input
+            ref="input"
+            :type="inputType"
+            :id="`bimdata-input-${uuid}`"
+            @input="$emit('update:modelValue', $event.currentTarget.value)"
+            :disabled="disabled"
+            :value="modelValue"
+            :placeholder="placeholder"
+            @focus="
+              $event.target.select();
+              $emit('focus', $event);
+            "
+            @blur="$emit('blur', $event)"
+            @keypress="$emit('keypress', $event)"
+            @change="$emit('change', $event)"
+            :autocomplete="autocomplete ? 'on' : 'off'"
+            v-bind="$attrs"
+            :maxlength="maxLength"
+          />
+          <BIMDataSpinner v-if="loading" class="items-center"></BIMDataSpinner>
+          <div class="bimdata-input-outlined__container__suffix-inner">
+            <slot name="suffixInner"></slot>
+          </div>
+        </div>
+        <slot name="suffix"></slot>
+      </div>
+    </fieldset>
+    <div
+      class="flex items-center"
+      :class="error || success ? 'justify-between' : 'justify-end'"
+    >
+      <span v-if="error" class="error">{{ errorMessage }}</span>
+      <span v-if="success" class="success">{{ successMessage }}</span>
+      <span v-if="counter" class="counter m-l-12">
+        {{ modelValue.length }}
+        / {{ maxLength }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+let uuid = 0;
+
+export default {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue",
+  },
+  props: {
+    autocomplete: {
+      type: Boolean,
+      default: false,
+    },
+    counter: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
+    inputType: {
+      type: String,
+      default: "text",
+      validator: type => {
+        const possibleTypes = [
+          "text",
+          "password",
+          "number",
+          "file",
+          "url",
+          "time",
+          "email",
+          "tel",
+        ];
+        return possibleTypes.includes(type);
+      },
+    },
+    label: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    margin: {
+      type: String,
+      default: "12px 0px",
+    },
+    maxLength: {
+      type: Number,
+      default: 100,
+    },
+    modelValue: {
+      type: [String, Number],
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    success: {
+      type: Boolean,
+      default: false,
+    },
+    successMessage: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: String,
+      default: "250px",
+    },
+  },
+  emits: ["update:modelValue", "blur", "keypress", "focus", "change"],
+  computed: {
+    style() {
+      return {
+        margin: `${this.margin}`,
+        width: `${this.width}`,
+      };
+    },
+  },
+  beforeCreate() {
+    this.uuid = uuid.toString();
+    uuid += 1;
+  },
+  created() {
+    this.$watch(
+      () => this.success && this.error,
+      successAndError => {
+        if (successAndError) {
+          throw new Error("Input state cannot be both success and error.");
+        }
+      },
+    );
+  },
+  methods: {
+    focus() {
+      this.$refs.input?.focus();
+    },
+    blur() {
+      this.$refs.input?.blur();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_BIMDataInputOutlined.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataInputOutlined/_BIMDataInputOutlined.scss b/src/BIMDataComponents/BIMDataInputOutlined/_BIMDataInputOutlined.scss
@@ -0,0 +1,96 @@
+@import "../../assets/scss/mixins/_font-size.scss";
+
+input:-webkit-autofill {
+  box-shadow: 0 0 0px 1000px var(--color-white) inset;
+}
+
+.bimdata-input-outlined {
+  position: relative;
+  font-family: var(--primary-font);
+  color: var(--color-primary);
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    label {
+      display: block;
+      font-size: 10px;
+      text-transform: uppercase;
+      font-weight: bold;
+      letter-spacing: 0.6px;
+      color: var(--color-granite-light);
+    }
+  }
+  &__container {
+    padding: 0 calc(var(--spacing-unit) / 2);
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--color-silver);
+    border-radius: 3px;
+    display: flex;
+    flex: 1;
+    font-size: 14px;
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+    input {
+      width: 100%;
+      min-height: 32px;
+      font-size: 14px;
+      color: var(--color-primary);
+      background-color: transparent;
+      border-style: none;
+      cursor: auto;
+      font-family: inherit;
+      &:focus {
+        outline: none;
+      }
+    }
+    &__prefix-inner,
+    &__suffix-inner {
+      align-content: center;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .error {
+    color: var(--color-high);
+    font-size: 11px;
+  }
+  .success {
+    color: var(--color-success);
+    font-size: 11px;
+  }
+  &.disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+  &.error {
+    .bimdata-input-outlined__container {
+      border-color: var(--color-high);
+      background-color: var(--color-high-lighter);
+    }
+  }
+  &.success {
+    .bimdata-input-outlined__container {
+      border-color: var(--color-success);
+      background-color: var(--color-success-lighter);
+    }
+  }
+  .counter {
+    font-size: 11px;
+    letter-spacing: -0.5px;
+    color: var(--color-granite-light);
+  }
+  &[type="file"] {
+    .bimdata-input-outlined__container {
+      border: none;
+    }
+  }
+  &[type="number"] {
+    input {
+      appearance: textfield;
+    }
+  }
+}
diff --git a/src/BIMDataComponents/index.js b/src/BIMDataComponents/index.js
@@ -21,6 +21,7 @@ export { default as BIMDataIcon } from "./BIMDataIcon/BIMDataIcon.vue";
 export * from "./BIMDataIcon/BIMDataIconStandalone/index.js";
 export { default as BIMDataIllustration } from "./BIMDataIllustration/BIMDataIllustration.vue";
 export { default as BIMDataInput } from "./BIMDataInput/BIMDataInput.vue";
+export { default as BIMDataInputOutlined } from "./BIMDataInputOutlined/BIMDataInputOutlined.vue";
 export { default as BIMDataLoading } from "./BIMDataLoading/BIMDataLoading.vue";
 export { default as BIMDataMenu } from "./BIMDataMenu/BIMDataMenu.vue";
 export { default as BIMDataMenuInline } from "./BIMDataMenuInline/BIMDataMenuInline.vue";

diff --git a/src/web/views/Components/Input/Input.vue b/src/web/views/Components/Input/Input.vue
@@ -4,6 +4,7 @@
       <BIMDataText component="h1" color="color-primary">
         {{ $route.name }}
       </BIMDataText>
+      <h2>Basic input</h2>
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataInput
@@ -17,6 +18,7 @@
             :disabled="getDisabled()"
             :margin="marginInput"
           >
+            >
             <template #inputIcon v-if="inputIcon">
               <BIMDataIconShow class="fill-granite-light" />
             </template>
@@ -75,8 +77,7 @@
               {{ getMargin() }}
             &gt;
 
-            {{ getInputIcon() }}
-
+          {{ getInputIcon() }}
             &lt;/BIMDataInput&gt;
           </pre>
         </template>
@@ -113,6 +114,8 @@
         </BIMDataText>
         <BIMDataTable :columns="slotsData[0]" :rows="slotsData.slice(1)" />
       </div>
+
+      <InputOutlined />
     </div>
   </main>
 </template>
@@ -123,10 +126,12 @@ import propsData from "./props-data.js";
 import slotsData from "./slots-data.js";
 // Components
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+import InputOutlined from "./InputOutlined.vue";
 
 export default {
   components: {
     ComponentCode,
+    InputOutlined,
   },
   data() {
     return {
@@ -165,18 +170,10 @@ export default {
       }
     },
     getLoading() {
-      if (this.loading) {
-        return true;
-      } else {
-        return false;
-      }
+      return this.loading;
     },
     getDisabled() {
-      if (this.disabled) {
-        return true;
-      } else {
-        return false;
-      }
+      return this.disabled;
     },
     getInputIcon() {
       if (this.inputIcon) {