aloha-vue 1.2.30 → 1.2.32

package/dist/aloha-vue.js

@@ -68,6 +68,7 @@ export { default as AGroupButtonDropdownPlugin } from "../src/plugins/AGroupButt
 export { default as AHttpPlugin } from "../src/plugins/AHttpPlugin";
 export { default as AI18nPlugin } from "../src/plugins/AI18nPlugin";
 export { default as AIconPlugin } from "../src/plugins/AIconPlugin";
+export { default as AInputNumberPlugin } from "../src/plugins/AInputNumberPlugin";
 export { default as AMobilePlugin } from "../src/plugins/AMobilePlugin";
 export { default as AModalPlugin } from "../src/plugins/AModalPlugin";
 export { default as APageTabTitlePlugin } from "../src/plugins/APageTabTitlePlugin";

package/dist/index.js

@@ -68,6 +68,7 @@ export { default as AGroupButtonDropdownPlugin } from "../src/plugins/AGroupButt
 export { default as AHttpPlugin } from "../src/plugins/AHttpPlugin";
 export { default as AI18nPlugin } from "../src/plugins/AI18nPlugin";
 export { default as AIconPlugin } from "../src/plugins/AIconPlugin";
+export { default as AInputNumberPlugin } from "../src/plugins/AInputNumberPlugin";
 export { default as AMobilePlugin } from "../src/plugins/AMobilePlugin";
 export { default as AModalPlugin } from "../src/plugins/AModalPlugin";
 export { default as APageTabTitlePlugin } from "../src/plugins/APageTabTitlePlugin";

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexExample/PageTableComplexExample.js

@@ -1,5 +1,6 @@
 import AIcon from "../../../../../../src/AIcon/AIcon";
 import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+import ASwitch from "../../../../../../src/ui/ASwitch/ASwitch";
 import ATable from "../../../../../../src/ATable/ATable";
 
 import HtmlAPI from "./compositionAPI/HtmlAPI";
@@ -15,6 +16,7 @@ export default {
   components: {
     AIcon,
     AlohaExample,
+    ASwitch,
     ATable,
   },
   setup() {
@@ -34,6 +36,7 @@ export default {
   data() {
     return {
       modelView: undefined,
+      modelLoading: false,
       modelColumnsVisible: {
         aloha: true,
       },

package/docs/src/views/PageTable/PageTableComplex/PageTableComplexExample/PageTableComplexExample.pug

@@ -5,7 +5,10 @@ aloha-example(
   description="_A_TABLE_GROUP_COMPLEX_DESCRIPTION_"
 )
   div
-    div#alohaTest Kolokol
+    div
+      a-switch(
+        v-model="modelLoading"
+      )
     a-table(
       ref="aloha"
       :columns="columns"
@@ -23,7 +26,7 @@ aloha-example(
       :is-pagination="true"
       :filter="{ filters }"
       :rows-footer="rowsFooter"
-      :is-loading-table="false"
+      :is-loading-table="modelLoading"
       :is-loading-multiple-actions="false"
       :views="views"
       :model-view="modelView"

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ATable/ATable.js

@@ -839,6 +839,7 @@ export default {
         }),
         this.isPreviewRightOpen && h(ATablePreviewRight, {
           countAllRows: this.countAllRowsLocal,
+          isLoadingTable: this.isLoadingTable,
           limitPagination: this.limit,
           offsetPagination: this.offset,
           previewHeaderTag: this.previewHeaderTag,

package/src/ATable/ATablePreviewRight/ATablePreviewRight.js

@@ -5,6 +5,7 @@ import {
 } from "vue";
 
 import AButton from "../../AButton/AButton";
+import ACloak from "../../ACloak/ACloak";
 import AResizer from "../../AResizer/AResizer";
 import ATranslation from "../../ATranslation/ATranslation";
 
@@ -20,6 +21,10 @@ export default {
       type: Number,
       required: true,
     },
+    isLoadingTable: {
+      type: Boolean,
+      required: false,
+    },
     limitPagination: {
       type: Number,
       required: false,
@@ -140,39 +145,41 @@ export default {
       h(this.previewHeaderTag, {
         class: "a_table__preview_right__header",
       }, [
-        h("div", {}, [
-          h(ATranslation, {
-            class: "a_table__preview_right__header__text",
-            tag: "span",
-            text: "_A_TABLE_PREVIEW_RIGHT_HEADER_{{rowNumber}}_{{rowNumberFormatted}}_{{countAllRows}}_{{countAllRowsFormatted}}_",
-            extra: {
-              rowNumber: this.rowNumber,
-              rowNumberFormatted: this.rowNumberFormatted,
-              countAllRows: this.countAllRows,
-              countAllRowsFormatted: this.countAllRowsFormatted,
-            },
-          }),
-          h("div", {
-            class: "a_table__preview_right__header__icons",
-          }, [
-            h(AButton, {
-              class: "a_btn a_btn_transparent_dark a_btn_small",
-              disabled: this.disabledBtnArrowLeft,
-              iconLeft: "ArrowLeft",
-              title: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
-              textScreenReader: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
-              onClick: this.toLastRow,
-            }),
-            h(AButton, {
-              class: "a_btn a_btn_transparent_dark a_btn_small",
-              disabled: this.disabledBtnArrowRight,
-              iconLeft: "ArrowRight",
-              title: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
-              textScreenReader: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
-              onClick: this.toNextRow,
+        this.isLoadingTable ?
+          h(ACloak) :
+          h("div", {}, [
+            h(ATranslation, {
+              class: "a_table__preview_right__header__text",
+              tag: "span",
+              text: "_A_TABLE_PREVIEW_RIGHT_HEADER_{{rowNumber}}_{{rowNumberFormatted}}_{{countAllRows}}_{{countAllRowsFormatted}}_",
+              extra: {
+                rowNumber: this.rowNumber,
+                rowNumberFormatted: this.rowNumberFormatted,
+                countAllRows: this.countAllRows,
+                countAllRowsFormatted: this.countAllRowsFormatted,
+              },
             }),
+            h("div", {
+              class: "a_table__preview_right__header__icons",
+            }, [
+              h(AButton, {
+                class: "a_btn a_btn_transparent_dark a_btn_small",
+                disabled: this.disabledBtnArrowLeft,
+                iconLeft: "ArrowLeft",
+                title: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
+                textScreenReader: "_A_TABLE_PREVIEW_RIGHT_PREVIOUS_ROW_",
+                onClick: this.toLastRow,
+              }),
+              h(AButton, {
+                class: "a_btn a_btn_transparent_dark a_btn_small",
+                disabled: this.disabledBtnArrowRight,
+                iconLeft: "ArrowRight",
+                title: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
+                textScreenReader: "_A_TABLE_PREVIEW_RIGHT_NEXT_ROW_",
+                onClick: this.toNextRow,
+              }),
+            ]),
           ]),
-        ]),
         h(AButton, {
           class: "a_btn a_btn_transparent_dark a_table__preview_right__btn_close",
           iconLeft: "Close",
@@ -185,14 +192,15 @@ export default {
       h("div", {
         class: "a_table__preview_right__body",
       }, [
-        this.$slots.previewRight ?
-          this.$slots.previewRight({
-            row: this.currentRow,
-            rowIndex: this.rowIndex,
-          }) :
-          h(ATranslation, {
-            text: "_A_TABLE_PREVIEW_RIGHT_HAS_NOT_SLOT_",
-          }),
+        this.isLoadingTable ? h(ACloak) :
+          this.$slots.previewRight ?
+            this.$slots.previewRight({
+              row: this.currentRow,
+              rowIndex: this.rowIndex,
+            }) :
+            h(ATranslation, {
+              text: "_A_TABLE_PREVIEW_RIGHT_HAS_NOT_SLOT_",
+            }),
       ]),
     ]);
   },

package/src/plugins/AInputNumberPlugin.js

@@ -0,0 +1,34 @@
+import {
+  ref,
+} from "vue";
+
+export const inputNumberPluginOptions = ref({
+  propsDefault: {
+    controlsType: "plus-minus",
+    eAllowed: false,
+    iconPrepend: undefined,
+    inputWidth: 200,
+    isLabelFloat: false,
+    max: undefined,
+    min: undefined,
+    modelUndefined: undefined,
+    placeholder: undefined,
+    precision: undefined,
+    readonly: undefined,
+    step: 1,
+    stepStrictly: undefined,
+    type: "number",
+  },
+});
+
+
+export default {
+  install: (app, {
+    propsDefault = {},
+  } = {}) => {
+    inputNumberPluginOptions.value.propsDefault = {
+      ...inputNumberPluginOptions.value.propsDefault,
+      ...propsDefault,
+    };
+  },
+};

package/src/styles/components/ATable.scss

@@ -6,8 +6,8 @@
   --a_table_cell_padding_x: .5rem;
   --a_table_cell_padding_y: .5rem;
   --a_table_row_hover_bg: #e1f2ff;
-  --a_table_row_preview_focus_bg: rgba(192, 209, 117, 0.75);
-  --a_table_row_preview_focus_was_bg: rgba(192, 209, 117, 0.3);
+  --a_table_row_preview_focus_bg: #D0DD98;
+  --a_table_row_preview_focus_was_bg: #ECF1D5;
   --a_table_quick_search_width: 250px;
   --a_table_between_actions_margin: .5rem;
   --a_table_preview_right_padding: .25rem .8rem;
@@ -72,17 +72,15 @@
   hyphens: auto;
 }
 .a_table__grandparent:not(.a_table_mobile) {
-  .a_table__cell {
-    .a_table__row_hover:hover &,
-    .a_table__row_hover:focus-within & {
-      background-color: var(--a_table_row_hover_bg);
-    }
-    .a_table__row.a_table__row_focus > & {
-      background-color: var(--a_table_row_preview_focus_bg);
-    }
-    .a_table__row.a_table__row_focus_was > & {
-      background-color: var(--a_table_row_preview_focus_was_bg);
-    }
+  .a_table__row_hover:hover > *,
+  .a_table__row_hover:focus-within > * {
+    background-color: var(--a_table_row_hover_bg);
+  }
+  .a_table__row.a_table__row_focus > * {
+    background-color: var(--a_table_row_preview_focus_bg);
+  }
+  .a_table__row.a_table__row_focus_was > * {
+    background-color: var(--a_table_row_preview_focus_was_bg);
   }
 }
 .a_table__cell__child {

package/src/ui/AInputNumber/AInputNumber.js

@@ -27,6 +27,9 @@ import UiInputAutofillAPI from "../compositionApi/UiInputAutofillAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 import VerifyAPI from "./compositionAPI/VerifyAPI";
 
+import {
+  inputNumberPluginOptions,
+} from "../../plugins/AInputNumberPlugin";
 import {
   isNumber,
 } from "lodash-es";
@@ -41,69 +44,73 @@ export default {
     controlsType: {
       type: String,
       required: false,
-      default: "plus-minus",
+      default: inputNumberPluginOptions.value.propsDefault.controlsType,
       validator: value => ["plus-minus", "arrows"].indexOf(value) !== -1,
       // TODO: "arrows",
     },
     eAllowed: {
       type: Boolean,
       required: false,
+      default: inputNumberPluginOptions.value.propsDefault.eAllowed,
     },
     iconPrepend: {
       type: String,
       required: false,
-      default: undefined,
+      default: inputNumberPluginOptions.value.propsDefault.iconPrepend,
     },
     inputWidth: {
       type: [String, Number],
       required: false,
-      default: 200,
+      default: inputNumberPluginOptions.value.propsDefault.inputWidth,
     },
     isLabelFloat: {
       type: Boolean,
       required: false,
-      default: false,
+      default: inputNumberPluginOptions.value.propsDefault.isLabelFloat,
     },
     max: {
       type: Number,
       required: false,
-      default: undefined,
+      default: inputNumberPluginOptions.value.propsDefault.max,
     },
     min: {
       type: Number,
       required: false,
-      default: undefined,
+      default: inputNumberPluginOptions.value.propsDefault.min,
     },
     modelUndefined: {
       required: false,
-      default: undefined,
+      default: inputNumberPluginOptions.value.propsDefault.modelUndefined,
     },
     placeholder: {
       type: [String, Number],
       required: false,
-      default: undefined,
+      default: inputNumberPluginOptions.value.propsDefault.placeholder,
     },
     precision: {
       type: Number,
       validator: value => value >= 0 && value === Number.parseInt(`${ value }`, 10),
+      default: inputNumberPluginOptions.value.propsDefault.placeholder,
     },
     readonly: {
       type: Boolean,
       required: false,
+      default: inputNumberPluginOptions.value.propsDefault.readonly,
     },
     step: {
       type: Number,
       required: false,
-      default: 1,
+      default: inputNumberPluginOptions.value.propsDefault.step,
     },
     stepStrictly: {
       type: Boolean,
       required: false,
+      default: inputNumberPluginOptions.value.propsDefault.stepStrictly,
     },
     type: {
       type: String,
       required: false,
-      default: "number",
+      default: inputNumberPluginOptions.value.propsDefault.type,
       validator: value => ["number", "integerNonNegative", "integerPositive", "integer"].indexOf(value) !== -1,
       // TODO: "float", "floatPositiv", "floatNonNegative"
     },