aloha-vue 1.0.284 → 1.0.286

package/docs/src/components/TheMenu/TheMenu.js

@@ -91,6 +91,13 @@ export default {
               },
               label: "Input",
             },
+            {
+              id: "input-number",
+              to: {
+                name: "PageInputNumber",
+              },
+              label: "Input number",
+            },
             {
               id: "json",
               label: "JSON",

package/docs/src/router/index.js

@@ -149,6 +149,11 @@ const ROUTES = [
     name: "PageWizard",
     component: () => import(/* webpackChunkName: "PageWizard" */ "../views/PageWizard/PageWizard.vue"),
   },
+  {
+    path: "/input-number",
+    name: "PageInputNumber",
+    component: () => import(/* webpackChunkName: "PageInputNumber" */ "../views/PageInputNumber/PageInputNumber.vue"),
+  },
   {
     path: "/group-button-dropdown",
     name: "PageGroupButtonDropdown",

package/docs/src/views/PageInputNumber/PageInputNumber.js

@@ -0,0 +1,20 @@
+import AInputNumber from "../../../../src/ui/AInputNumber/AInputNumber";
+
+export default {
+  name: "PageInputNumber",
+  components: {
+    AInputNumber,
+  },
+  data() {
+    return {
+      model1: 10,
+      model2: 11.2,
+      model3: undefined,
+    };
+  },
+  methods: {
+    changeModel1(arg) {
+      console.log("arg", arg);
+    },
+  },
+};

package/docs/src/views/PageInputNumber/PageInputNumber.pug

@@ -0,0 +1,42 @@
+div
+  h1 Form element
+  h2 Input number
+  a-input-number(
+    id="input1"
+    v-model="model1"
+    type="number"
+    label="Input 1"
+    :required="true"
+    :step="0.1"
+    errors="not valid"
+  )
+  div model1: {{ model1 }}
+
+  input(
+    type="number"
+  )
+  //h2 Textarea
+  //a-textarea(
+  //  id="textarea1"
+  //  v-model="model2"
+  //  type="text"
+  //  label="Textarea 1"
+  //  :required="true"
+  //  :is-scalable="true"
+  //)
+  //div model2:
+  //pre {{ model2 }}
+  //
+  //h2 Textarea 2
+  //  a-textarea(
+  //    id="textarea3"
+  //    v-model="model3"
+  //    type="text"
+  //    label="Textarea 2"
+  //    :required="true"
+  //  )
+  //  div model3:
+  //  pre {{ model3 }}
+  button.a_btn.a_btn_primary() Temp
+
+

package/docs/src/views/PageInputNumber/PageInputNumber.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageInputNumber.pug"></template>
+<script src="./PageInputNumber.js"></script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.284",
+  "version": "1.0.286",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AButton/AButton.js

@@ -139,6 +139,16 @@ export default {
       required: false,
       default: undefined,
     },
+    tag: {
+      type: String,
+      required: false,
+      default: "button",
+    },
+    tabindex: {
+      type: [Number, String],
+      required: false,
+      default: undefined,
+    },
   },
   emits: [
     "click",
@@ -172,7 +182,7 @@ export default {
     };
   },
   render() {
-    return h("button", {
+    return h(this.tag, {
       ...this.attributes,
       id: this.id,
       class: [
@@ -183,6 +193,7 @@ export default {
         },
       ],
       type: this.type,
+      tabindex: this.tabindex,
       disabled: this.disabled,
       ariaDisabled: this.ariaDisabled,
       onClick: this.onClick,

package/src/const/AKeysCode.js

@@ -1,10 +1,13 @@
 export default {
-  tab: 9,
-  enter: 13,
-  space: 32,
+  arrowDown: 40,
   arrowLeft: 37,
-  arrowUp: 38,
   arrowRight: 39,
-  arrowDown: 40,
+  arrowUp: 38,
+  e: 69,
+  enter: 13,
   escape: 27,
+  minus: 109,
+  plus: 107,
+  space: 32,
+  tab: 9,
 };

package/src/styles/components/ui/AInputNumber.scss

@@ -0,0 +1,40 @@
+.a_form_element_number_controls {
+  display: inline-flex;
+  align-items: stretch;
+  .a_btn_group {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    > .aloha_btn {
+      --a_btn_border_color: #ced4da;
+      &:first-child {
+        margin-left: calc(-1 * var(--a_btn_border_width, var(--a_border_width)));
+      }
+      &:not(:last-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+  .a_input_number {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.a_form_element__parent_invalid {
+  .a_form_element_number_controls .a_btn_group > .aloha_btn {
+    --a_btn_border_color: var(--a_form_element_error_color);
+  }
+}
+
+.a_input_number {
+  height: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+  line-height: 1;
+}

package/src/styles/styles.scss

@@ -21,6 +21,7 @@
 @import "components/AWizard";
 @import "components/AGroupButtonDropdown";
 @import "components/AFormElement/ATextarea";
+@import "components/ui/AInputNumber";
 
 .a_dropdown__caret {
   margin: 0;

package/src/ui/AInputNumber/AInputNumber.js

@@ -0,0 +1,316 @@
+import {
+  h,
+  ref,
+  toRef, watch,
+  withDirectives,
+} from "vue";
+
+import AButton from "../../AButton/AButton";
+import AErrorsText from "../AErrorsText/AErrorsText";
+import AFormElementBtnClear from "../../AFormElement/AFormElementBtnClear/AFormElementBtnClear";
+import AIcon from "../../AIcon/AIcon";
+import ALabel from "../ALabel/ALabel";
+
+import ASafeHtml from "../../directives/ASafeHtml";
+
+import UiClearButtonMixinProps from "../mixins/UiClearButtonMixinProps";
+import UiMixinProps from "../mixins/UiMixinProps";
+
+import UiAPI from "../compositionApi/UiAPI";
+import UiInputAutofillAPI from "../compositionApi/UiInputAutofillAPI";
+import UiClearButtonAPI from "../compositionApi/UiClearButtonAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
+import ModelAPI from "./compositionAPI/ModelAPI";
+import IncreaseDecreaseAPI from "./compositionAPI/IncreaseDecreaseAPI";
+import VerifyAPI from "./compositionAPI/VerifyAPI";
+import InputEventsAPI from "./compositionAPI/InputEventsAPI";
+import { isNumber } from "lodash-es";
+
+export default {
+  name: "AInputNumber",
+  mixins: [
+    UiClearButtonMixinProps,
+    UiMixinProps,
+  ],
+  props: {
+    max: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: "number",
+      validator: value => ["number", "float", "integer", "float-positiv", "integer-positiv"].indexOf(value) !== -1,
+    },
+    iconPrepend: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    modelUndefined: {
+      required: false,
+      default: undefined,
+    },
+    step: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+    precision: {
+      type: Number,
+      validator: value => value >= 0 && value === Number.parseInt(`${ value }`, 10),
+    },
+    controlsType: {
+      type: String,
+      required: false,
+      default: "plus-minus",
+      validator: value => ["plus-minus", "arrows"].indexOf(value) !== -1,
+      // TODO: "arrows",
+    },
+    stepStrictly: {
+      type: Boolean,
+      required: false,
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
+    eAllowed: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  setup(props, context) {
+    const {
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
+
+    const {
+      ariaDescribedbyLocal,
+      changeModel,
+      clearModel,
+      errorsId,
+      helpTextId,
+      htmlIdLocal,
+      isErrors,
+      isModel,
+      onBlur,
+      onFocus,
+    } = UiAPI(props, context);
+
+    const {
+      isClearButtonLocal,
+    } = UiClearButtonAPI(props, {
+      isModel,
+    });
+
+    const inputRef = ref(undefined);
+    const disabled = toRef(props, "disabled");
+    const onInput = $event => {
+      if (disabled.value) {
+        return;
+      }
+      const value = $event.target.value;
+      changeModel({
+        model: +value,
+      });
+    };
+
+    const {
+      isAutofill,
+    } = UiInputAutofillAPI({ inputRef });
+
+    const {
+      ensurePrecision,
+      verifyValue,
+    } = VerifyAPI(props, {
+      changeModel,
+    });
+
+    const {
+      currentValue,
+      displayValue,
+      setCurrentValue,
+      userInput,
+    } = ModelAPI(props, {
+      verifyValue,
+      changeModel,
+    });
+
+    const {
+      increase,
+      decrease,
+    } = IncreaseDecreaseAPI(props, {
+      currentValue,
+      displayValue,
+      ensurePrecision,
+      setCurrentValue,
+    });
+
+    const {
+      handleInput,
+      handleInputChange,
+      handleKeydown,
+      onBlurNumber,
+    } = InputEventsAPI(props, {
+      currentValue,
+      decrease,
+      displayValue,
+      increase,
+      inputRef,
+      onBlur,
+      setCurrentValue,
+      userInput,
+    });
+
+    watch(
+      () => props.modelValue,
+      value => {
+        const userInputLocal = verifyValue(userInput.value);
+        const newValue = verifyValue(value, true);
+        if (!isNumber(userInputLocal) && (!userInputLocal || userInputLocal !== newValue)) {
+          currentValue.value = newValue;
+          userInput.value = null;
+        }
+      },
+      { immediate: true }
+    );
+
+    return {
+      currentValue,
+      handleInput,
+      handleInputChange,
+      handleKeydown,
+      ariaDescribedbyLocal,
+      clearModel,
+      componentStyleHide,
+      displayValue,
+      errorsId,
+      helpTextId,
+      htmlIdLocal,
+      inputRef,
+      isAutofill,
+      isClearButtonLocal,
+      isErrors,
+      isModel,
+      onBlurNumber,
+      onFocus,
+      onInput,
+      increase,
+      decrease,
+      userInput,
+    };
+  },
+  render() {
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
+    }, [
+      h("div", {
+        class: ["a_form_element__parent", {
+          a_form_element__parent_float: this.isLabelFloat,
+          a_form_element__parent_not_empty: this.isModel || this.isAutofill,
+          a_form_element__parent_float_has_icon_prepend: this.iconPrepend,
+          a_form_element__parent_invalid: this.isErrors,
+        }],
+      }, [
+        this.label && h(ALabel, {
+          id: this.htmlIdLocal,
+          label: this.label,
+          labelClass: this.labelClass,
+          required: this.required,
+          type: this.type,
+          isLabelFloat: this.isLabelFloat,
+        }),
+        h("div", {
+          class: [
+            "a_form_element_number",
+            {
+              a_form_element_number_controls: this.controlsType,
+            },
+          ],
+        }, [
+          h("div", {
+            class: "a_form_element",
+          }, [
+            this.iconPrepend && h(AIcon, {
+              icon: this.iconPrepend,
+              class: "a_input__icon_prepend",
+            }),
+            h("input", {
+              ref: "inputRef",
+              id: this.htmlIdLocal,
+              value: this.displayValue,
+              type: "number",
+              class: [
+                "a_form_control a_input a_input_number",
+                this.inputClass,
+                {
+                  a_form_element_with_btn_close: this.isClearButtonLocal,
+                  a_form_control_invalid: this.isErrors,
+                },
+              ],
+              min: this.min,
+              max: this.max,
+              step: this.step,
+              disabled: this.disabled,
+              ariaRequired: this.required,
+              ariaInvalid: this.isErrors,
+              "aria-describedby": this.ariaDescribedbyLocal,
+              ...this.inputAttributes,
+              onInput: this.handleInput,
+              onChange: this.handleInputChange,
+              onKeydown: this.handleKeydown,
+              onFocus: this.onFocus,
+              onBlur: this.onBlurNumber,
+            }),
+            this.isClearButtonLocal && h(AFormElementBtnClear, {
+              disabled: this.disabled,
+              clearButtonClass: this.clearButtonClass,
+              onClear: this.clearModel,
+            }),
+          ]),
+          this.controlsType === "plus-minus" && h("div", {
+            class: "a_btn_group",
+          }, [
+            h(AButton, {
+              class: "a_btn a_btn_outline_secondary",
+              iconLeft: "Minus",
+              tabindex: -1,
+              attributes: {
+                role: "button",
+              },
+              onClick: this.decrease,
+            }),
+            h(AButton, {
+              class: "a_btn a_btn_outline_secondary",
+              iconLeft: "Plus",
+              tabindex: -1,
+              attributes: {
+                role: "button",
+              },
+              onClick: this.increase,
+            }),
+          ]),
+        ]),
+
+        this.helpText && withDirectives(h("div", {
+          id: this.helpTextId,
+          class: "a_form_element__help_text",
+        }), [
+          [ASafeHtml, this.helpText],
+        ]),
+        this.isErrors && h(AErrorsText, {
+          id: this.errorsId,
+          errors: this.errors,
+        }),
+      ]),
+    ]);
+  },
+};

package/src/ui/AInputNumber/compositionAPI/IncreaseDecreaseAPI.js

@@ -0,0 +1,52 @@
+import {
+  computed, ref,
+  toRef,
+} from "vue";
+
+import {
+  isNumber,
+} from "lodash-es";
+
+export default function IncreaseDecreaseAPI(props, {
+  currentValue = ref(0),
+  displayValue = computed(() => ""),
+  ensurePrecision = () => {},
+  setCurrentValue = () => {},
+}) {
+  const disabled = toRef(props, "disabled");
+  const modelValue = toRef(props, "modelValue");
+  const max = toRef(props, "max");
+  const min = toRef(props, "min");
+  const readonly = toRef(props, "readonly");
+
+  const minDisabled = computed(() => {
+    return isNumber(modelValue.value) && modelValue.value <= min.value;
+  });
+
+  const maxDisabled = computed(() => {
+    return isNumber(modelValue.value) && modelValue.value >= max.value;
+  });
+
+  const increase = () => {
+    if (readonly.value || disabled.value || maxDisabled.value) {
+      return; 
+    }
+    const value = Number(displayValue.value) || 0;
+    const newValue = ensurePrecision({ value, currentValue: currentValue.value });
+    setCurrentValue(newValue);
+  };
+
+  const decrease = () => {
+    if (readonly.value || disabled.value || minDisabled.value) {
+      return; 
+    }
+    const value = Number(displayValue.value) || 0;
+    const newValue = ensurePrecision({ value, currentValue: currentValue.value, coefficient: -1 });
+    setCurrentValue(newValue);
+  };
+
+  return {
+    increase,
+    decrease,
+  };
+}