@avakhula/ui 0.1.13 → 0.1.15

package/src/components/Form/DatePicker/DatePicker.vue

@@ -1,10 +1,11 @@
 <template>
   <div
-    class="flatpickr-wrapper"
+    class="ib-flatpickr-wrapper"
     :class="{
       'has-labels': label.length || endDateLabel.length,
       'has-label': label.length,
       'has-error': errorMessage.length,
+      'is-disabled': disabled,
       'is-range': mode === 'range',
     }"
   >
@@ -12,17 +13,22 @@
       errorMessage
     }}</ib-alert>
 
-    <div class="inputs-wrapper">
+    <div ref="inputsWrapper" class="inputs-wrapper">
       <div class="input-group-wrapper">
         <ib-label class="label" v-if="label.length" :required="required">
           {{ label }}
         </ib-label>
         <div class="input-wrapper" @click="open" :class="{ active: isOpen }">
-          <input
-            :placeholder="placeholder"
-            ref="date"
-            class="date-picker-input"
-          />
+          <label :aria-label="ariaLabel">
+            <input
+              :placeholder="placeholder"
+              :name="name"
+              ref="date"
+              id="date"
+              :disabled="disabled"
+              class="date-picker-input"
+            />
+          </label>
 
           <ib-icon name="today-outline" class="calendar-icon" />
         </div>
@@ -46,12 +52,14 @@
           @click="openEndDate"
           :class="{ active: isOpenEndDate }"
         >
-          <input
-            class="date-picker-input"
-            :placeholder="placeholder"
-            ref="toDate"
-          />
-
+          <label :aria-label="endDateAriaLabel">
+            <input
+              class="date-picker-input"
+              :placeholder="endDatePlaceholder"
+              ref="toDate"
+              @keydown="onKeydownEndField"
+            />
+          </label>
           <ib-icon name="today-outline" class="calendar-icon" />
         </div>
 
@@ -73,7 +81,7 @@ import "flatpickr/dist/flatpickr.css";
 import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 import chevronBackIcon from "./Icons/chevron-back";
 import chevronForwardIcon from "./Icons/chevron-forward";
-import { ESC_KEY_CODE } from "../../../constants/keyCodes";
+import { ESC_KEY_CODE, BACKSPACE_KEY_CODE } from "../../../constants/keyCodes";
 
 export const SINGLE_MODE = "single";
 export const RANGE_MODE = "range";
@@ -90,6 +98,10 @@ export default {
       type: String,
       default: "",
     },
+    endDatePlaceholder: {
+      type: String,
+      default: "",
+    },
     required: {
       type: Boolean,
       default: false,
@@ -102,6 +114,14 @@ export default {
       type: String,
       default: SINGLE_MODE,
     },
+    ariaLabel: {
+      type: String,
+      default: "",
+    },
+    endDateAriaLabel: {
+      type: String,
+      default: "",
+    },
     label: {
       type: String,
       default: "",
@@ -122,9 +142,14 @@ export default {
       type: String,
       default: "",
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
   },
   mounted() {
     document.addEventListener("keyup", this.onDocumentKeyDown, true);
+    this.$refs.inputsWrapper.addEventListener("keyup", this.backspaceHandler);
 
     this.$nextTick(() => {
       this.initFlatpickr();
@@ -137,8 +162,22 @@ export default {
     value() {
       this.initFlatpickr();
     },
+    disabled() {
+      this.$nextTick(() => {
+        this.initFlatpickr();
+      });
+    },
     modelValue() {
-      this.initFlatpickr();
+      if (JSON.stringify(this.modelValue) === JSON.stringify(this.data)) return;
+
+      let value;
+      if (Array.isArray(this.modelValue)) {
+        value = this.modelValue[0] && this.modelValue[1] ? this.modelValue : [];
+      } else {
+        value = this.modelValue;
+      }
+
+      this.flat?.setDate(value, true);
     },
   },
   data() {
@@ -196,7 +235,7 @@ export default {
         if (this.mode === RANGE_MODE) {
           defaultConfig.defaultDate = this.modelValue.length
             ? [this.modelValue[0], this.modelValue[1]]
-            : [this.value[0], this.value[1]];
+            : [this.value?.[0], this.value?.[1]];
         } else {
           defaultConfig.defaultDate = this.modelValue
             ? this.modelValue
@@ -213,6 +252,7 @@ export default {
       this.$nextTick(() => {
         this.isOpen = false;
         this.isOpenEndDate = false;
+        this.$emit("blur");
       });
     },
     onChange(value) {
@@ -224,7 +264,18 @@ export default {
     },
     onDocumentKeyDown(e) {
       if (e.keyCode === ESC_KEY_CODE) {
-        this.close();
+        this.onClose();
+      }
+    },
+    onKeydownEndField(e) {
+      if (e.key === "ArrowDown") {
+        this.flat.selectedDateElem.focus();
+      }
+    },
+    backspaceHandler(e) {
+      if(e.keyCode === BACKSPACE_KEY_CODE) {
+        this.$emit("input", "");
+        this.$emit("update:modelValue", '');
       }
     },
     triggerChange() {
@@ -247,6 +298,8 @@ export default {
             this.$emit("input", this.data);
             this.$emit("update:modelValue", this.data);
           }
+
+          this.$emit("blur");
         }
       });
     },
@@ -271,12 +324,14 @@ export default {
   },
   beforeUnmount() {
     document.removeEventListener("keyup", this.onDocumentKeyDown);
+    this.$refs.inputsWrapper.removeEventListener("keyup", this.backspaceHandler);
   },
   components: {
     IbIcon,
     IbLabel,
     IbAlert,
   },
+  emits: ["input", "update:modelValue"],
 };
 </script>
 <style lang="scss">

package/src/components/Form/FormGroup/FormGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ib-form-group" :class="{ disable: disable }">
+  <div class="ib-form-group" :class="{ disabled: disabled }">
     <slot></slot>
     <p class="support-text" v-if="supportText.length">{{ supportText }}</p>
   </div>
@@ -13,7 +13,7 @@ export default {
       type: String,
       default: "",
     },
-    disable: {
+    disabled: {
       type: Boolean,
       default: false,
     },
@@ -34,7 +34,7 @@ export default {
     margin-top: 5px;
   }
 
-  &.disable {
+  &.disabled {
     .support-text {
       color: $neutral-500;
     }

package/src/components/Form/Input/Input.vue

@@ -2,18 +2,29 @@
   <div>
     <ib-alert v-if="errorMessage">{{ errorMessage }}</ib-alert>
 
-    <div class="ib-input-wrapper" :class="{ 'has-settings': hasSettings }">
+    <div
+        class="ib-input-wrapper"
+        :class="{
+            'has-settings': hasSettings,
+            'success': isSuccess,
+            'numbers-type': type === 'number' && !hideNumberActions,
+        }"
+    >
       <ib-icon v-if="showIcon" class="icon-search" name="search-outline" />
 
       <input
         v-bind="attrs"
-        v-model="actualValue"
+        v-model.trim="actualValue"
         ref="field"
         :aria-invalid="hasErrorState ? true : false"
         :readonly="readonly"
         :disabled="disabled"
         :id="id"
+        :autocomplete="autocomplete"
         :class="classes"
+        :min="min"
+        :max="max"
+        :step="step"
         @input="onInput($event)"
         @blur="onBlur($event)"
         @focus="onFocus($event)"
@@ -29,21 +40,56 @@
         @click="clearInput"
         @keypress.enter="clearInput"
         v-if="type !== 'password' && showClearButton"
-        v-show="actualValue?.length"
+        v-show="hasValue"
       >
         <ib-icon name="close-outline"></ib-icon>
       </ib-icon-button>
 
+      <ib-icon v-if="isSuccess" class="succes-checkmark" name="checkmark-circle" />
+      <div v-if="type === 'number' && !hideNumberActions" class="number-button-group">
+          <div v-show="hasValue" class="divider"></div>
+
+          <ib-icon-button
+              kind="ghost"
+              class="button-decrement"
+              :disabled="readonly || disabled"
+              prevent-default
+              type="button"
+              aria-label="Decrement value"
+              v-tooltip="decrementButtonMessage"
+              @blur="onBlur"
+              @click="decrement"
+              @keypress.enter="decrement"
+          >
+              <ib-icon name="remove-outline"></ib-icon>
+          </ib-icon-button>
+
+          <ib-icon-button
+              kind="ghost"
+              class="button-increment"
+              :disabled="readonly || disabled"
+              prevent-default
+              type="button"
+              aria-label="Increment value"
+              v-tooltip="incrementButtonMessage"
+              @blur="onBlur"
+              @click="increment"
+              @keypress.enter="increment"
+          >
+              <ib-icon name="add-outline"></ib-icon>
+          </ib-icon-button>
+      </div>
+
       <ib-icon-button
         kind="ghost"
         class="toggle-password"
         prevent-default
         type="button"
-        :disabled="readonly || disabled"
+        :disabled="disabled"
         :help-text="showPassword ? hidePasswordMessage : showPasswordMessage"
         @click.prevent="toggleShowPassword"
         v-if="type === 'password'"
-        v-show="actualValue?.length"
+        v-show="hasValue"
       >
         <ib-icon
           :name="showPassword ? 'eye-off-outline' : 'eye-outline'"
@@ -85,6 +131,7 @@ import IbDropdown from "../../Dropdown/Dropdown.vue";
 import { inputTypeOptions } from "./constants";
 import generateUID from "../../../helpers/generateUID";
 import removeEvents from "../../../helpers/removeEvents";
+import { TooltipDirective as Tooltip } from "../../../directives/tooltip/tooltip"
 
 import {
   verticalPosition,
@@ -164,6 +211,37 @@ export default {
       type: Boolean,
       default: false,
     },
+    autocomplete: {
+      type: String
+    },
+    isSuccess: {
+      type: Boolean,
+      default: false,
+    },
+    hideNumberActions: {
+      type: Boolean,
+      default: false,
+    },
+    decrementButtonMessage: {
+        type: String,
+        default: "Decrement"
+    },
+    incrementButtonMessage: {
+        type: String,
+        default: "Increment"
+    },
+    step: {
+        type: Number,
+        default: 1
+    },
+    min: {
+        type: Number,
+        default: 0,
+    },
+    max: {
+        type: Number,
+        default: Infinity,
+    },
   },
   data() {
     return {
@@ -181,10 +259,10 @@ export default {
       this.showPassword = !this.showPassword;
     },
     clearInput() {
-      this.actualValue = "";
-      this.$emit("update:modelValue", this.actualValue);
-      this.$emit("input", this.actualValue);
-      this.$emit("clear");
+        this.actualValue = "";
+        this.$emit("update:modelValue", this.actualValue);
+        this.$emit("input", this.actualValue);
+        this.$emit("clear");
     },
     onBlur() {
       this.$emit("blur", this.actualValue);
@@ -193,12 +271,31 @@ export default {
       this.$emit("focus", this.actualValue);
     },
     onInput() {
-      if (this.debounce) {
-        this.delayedInput(this.actualValue);
-      } else {
+        if (this.debounce) {
+            this.delayedInput(this.actualValue);
+        } else {
+            this.$emit("update:modelValue", this.actualValue);
+            this.$emit("input", this.actualValue);
+        }
+    },
+    decrement() {
+        if (this.actualValue > this.min) {
+            this.actualValue = +this.actualValue - this.step;
+        }
+
         this.$emit("update:modelValue", this.actualValue);
         this.$emit("input", this.actualValue);
-      }
+        this.$emit("blur", this.actualValue);
+    },
+    increment() {
+        if (this.actualValue < this.max) {
+
+            this.actualValue = +this.actualValue + this.step;
+        }
+
+        this.$emit("update:modelValue", this.actualValue);
+        this.$emit("input", this.actualValue);
+        this.$emit("blur", this.actualValue);
     },
     delayedInput(value) {
       if (this.timer) {
@@ -219,6 +316,9 @@ export default {
     hasSettings() {
       return !!this.$slots.settings;
     },
+    hasValue() {
+      return this.actualValue?.toString().length;
+    },
     classes() {
       const classList = ["ib-input"];
 
@@ -272,6 +372,9 @@ export default {
     IbIcon,
     IbDropdown,
   },
+  directives: {
+    Tooltip,
+  },
   inheritAttrs: false,
 };
 </script>

package/src/components/Form/Input/input.scss

@@ -28,6 +28,36 @@ $input-border-error-color: $red-800;
     z-index: 11;
   }
 
+    .number-button-group {
+        display: flex;
+        position: absolute;
+        align-items: center;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+
+        .divider {
+            width: 1px;
+            height: 16px;
+            background-color: $gray-500;
+            margin-right: 5px;
+        }
+
+        .button-decrement {
+            margin-right: 5px;
+        }
+    }
+
+    &.numbers-type {
+        .button-clear {
+            right: 67px;
+        }
+
+        input[type="number"] {
+            padding-right: 90px;
+        }
+    }
+
   .icon-search {
     font-size: 12px;
     position: absolute;
@@ -71,6 +101,24 @@ $input-border-error-color: $red-800;
     }
   }
 
+  &.success {
+    .ib-input {
+        border-radius: 4px;
+        border-bottom: 0px;
+        @include outline(0px, $green-800);
+        padding-right: 60px;
+    }
+
+    .succes-checkmark {
+        position: absolute;
+        right: 35px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 11;
+        color: $green-800;
+    }
+  }
+
   .ib-input {
     width: 100%;
     @include Ib-H4-regular;
@@ -114,14 +162,25 @@ $input-border-error-color: $red-800;
       display: none;
     }
 
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    &[type="number"] {
+        -moz-appearance:textfield;
+    }
+
+
     &:disabled {
       color: $input-disabled-color;
       background-color: $input-disabled-bg;
       border-bottom-color: $input-disabled-border-color;
 
       &:-webkit-autofill,
-      &:-webkit-autofill:hover, 
-      &:-webkit-autofill:focus, 
+      &:-webkit-autofill:hover,
+      &:-webkit-autofill:focus,
       &:-webkit-autofill:active {
         -webkit-box-shadow: 0 0 0 30px $input-disabled-bg inset !important;
         -webkit-text-fill-color: $input-disabled-color;

package/src/components/Form/Label/Label.vue

@@ -1,26 +1,25 @@
 <template>
-  <label :class="classes" :for="for">
+  <label :class="classes" :for>
     <span v-if="required" class="required">* </span>
     <slot></slot>
 
     <ib-icon-button
-      v-if="infoText.length"
+      v-if="infoText.length || Object.keys(infoText).length"
       size="xs"
       class="info-button"
       kind="ghost"
       type="button"
+      v-tooltip:[tooltipPosition]="infoText"
     >
       <ib-icon name="information-circle-outline" />
-
-      <ib-tooltip :text="infoText" :position="tooltipPosition"></ib-tooltip>
     </ib-icon-button>
   </label>
 </template>
 
 <script>
 import IbIconButton from "../../IconButton/IconButton.vue";
-import IbTooltip from "../../Tooltip/Tooltip.vue";
 import IbIcon from "../../Icon.vue";
+import { TooltipDirective as Tooltip } from "../../../directives/tooltip/tooltip";
 
 export default {
   name: "IbLabel",
@@ -33,23 +32,32 @@ export default {
       default: false,
     },
     infoText: {
-      type: String,
+      type: [String, Object],
       default: "",
     },
     tooltipPosition: {
       type: String,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     this.$globalEvents.$on(`label:disabled:${this.for}`, (value) => {
-      this.disabled = value;
+      this.idDisabled = value;
     });
   },
   data() {
     return {
-      disabled: false,
+      idDisabled: this.disabled,
     };
   },
+  watch: {
+    disabled(value) {
+      this.idDisabled = value;
+    },
+  },
   computed: {
     classes() {
       const classList = ["ib-label"];
@@ -58,7 +66,7 @@ export default {
         classList.push("has-info-text");
       }
 
-      if (this.disabled) {
+      if (this.idDisabled) {
         classList.push("label-disabled");
       }
 
@@ -68,7 +76,9 @@ export default {
   components: {
     IbIconButton,
     IbIcon,
-    IbTooltip,
+  },
+  directives: {
+    Tooltip,
   },
 };
 </script>
@@ -109,6 +119,8 @@ export default {
   .info-button {
     display: inline-block;
     margin-left: 3px;
+    position: relative;
+
     .ib-icon {
       color: $gray-600;
       font-size: 16px;