aloha-vue 1.2.83 → 1.2.85

package/docs/src/main.js

@@ -9,7 +9,6 @@ import {
   AMobilePlugin,
   AModalPlugin,
   ASafeHtml,
-  ASelectPlugin,
 } from "../../dist";
 import mainIcons from "./mainIcons";
 
@@ -32,11 +31,6 @@ APP.use(AModalPlugin, {
     closeButtonClass: "a_btn a_btn_link",
   },
 });
-APP.use(ASelectPlugin, {
-  propsDefault: {
-    menuWidthType: "by_content",
-  },
-});
 APP.use(AFiltersPlugin, {
   config: {
     headerBottomGroups: [

package/package.json

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

package/src/AFilters/AFiltersHorizontal/AFiltersHorizontal.js

@@ -250,9 +250,11 @@ export default {
               class: "a_filters_top__footer__select",
               type: "select",
               data: this.filtersHidden,
+              keyGroup: "group",
               keyLabel: "label",
               keyId: "id",
               label: "_A_FILTERS_ADD_FILTER_",
+              menuWidthType: "by_content",
               translateData: true,
               disabled: !this.filtersHidden.length,
               search: true,
@@ -275,17 +277,18 @@ export default {
       }, [
         h(ASelect, {
           modelValue: this.modelFiltersSaved,
+          change: this.changeModelFiltersSaved,
           class: "a_filters_top__save_select",
-          type: "select",
           data: this.filtersSaved,
-          keyLabel: "label",
+          deselect: true,
+          disabled: !this.filtersSaved.length,
           keyId: "label",
+          keyLabel: "label",
           label: "_A_FILTERS_SAVE_SELECT_",
-          translateData: true,
-          disabled: !this.filtersSaved.length,
+          menuWidthType: "by_content",
           search: true,
-          deselect: true,
-          change: this.changeModelFiltersSaved,
+          translateData: true,
+          type: "select",
         }),
         h(AButton, {
           id: this.buttonSaveComponentId,

package/src/AFilters/AFiltersHorizontal/AFiltersHorizontalFilterUi/compositionAPI/FilterSpecificTypeAPI.js

@@ -3,6 +3,9 @@ import {
   toRef,
 } from "vue";
 
+import {
+  typesMapDatepickerRange,
+} from "../../../../ui/ADatepickerRange/utils/Types";
 import {
   typesMapInputNumberRange,
 } from "../../../../ui/AInputNumberRange/utils/Types";
@@ -15,7 +18,7 @@ export default function FilterSpecificTypeAPI(props) {
 
   const filterSpecificAttributes = computed(() => {
     const ATTRIBUTES = {};
-    if (typesMapInputNumberRange[filter.value.type]) {
+    if (typesMapInputNumberRange[filter.value.type] || typesMapDatepickerRange[filter.value.type]) {
       if (isUndefined(filter.value.inputWidth)) {
         ATTRIBUTES.inputWidth = "auto";
       }

package/src/APagination/APaginationCountPerPage/APaginationCountPerPage.js

@@ -51,6 +51,7 @@ export default {
     const {
       changeLimit,
       changeLimitFromSelect,
+      keyDownChangeLimit,
       limitString,
     } = LimitAPI(props, context);
 
@@ -62,6 +63,7 @@ export default {
       changeLimit,
       changeLimitFromSelect,
       extraForTranslate,
+      keyDownChangeLimit,
       limitString,
     };
   },
@@ -136,6 +138,7 @@ export default {
                   textScreenReader: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
                   title: "_A_COUNT_PER_PAGE_ITEM_{{count}}_",
                   onClick: () => this.changeLimit(count),
+                  onKeydown: $event => this.keyDownChangeLimit($event, count),
                 }),
               ]);
             }),

package/src/APagination/APaginationCountPerPage/compositionAPI/LimitAPI.js

@@ -3,6 +3,8 @@ import {
   toRef,
 } from "vue";
 
+import AKeysCode from "../../../const/AKeysCode";
+
 export default function LimitAPI(props, { emit }) {
   const isLoadingTable = toRef(props, "isLoadingTable");
   const limit = toRef(props, "limit");
@@ -22,9 +24,19 @@ export default function LimitAPI(props, { emit }) {
     changeLimit(model);
   };
 
+  const keyDownChangeLimit = ($event, limit) => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      changeLimit(limit);
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
   return {
     changeLimit,
     changeLimitFromSelect,
+    keyDownChangeLimit,
     limitString,
   };
 }

package/src/APagination/APaginationPages/APaginationPages.js

@@ -64,6 +64,11 @@ export default {
     });
 
     const {
+      keyDownUpdateOffset,
+      keyDownUpdateOffsetFirst,
+      keyDownUpdateOffsetLast,
+      keyDownUpdateOffsetNext,
+      keyDownUpdateOffsetPrevious,
       updateOffset,
       updateOffsetFirst,
       updateOffsetLast,
@@ -80,6 +85,11 @@ export default {
       currentItem,
       disabledButtonFirstPage,
       disabledButtonLastPage,
+      keyDownUpdateOffset,
+      keyDownUpdateOffsetFirst,
+      keyDownUpdateOffsetLast,
+      keyDownUpdateOffsetNext,
+      keyDownUpdateOffsetPrevious,
       maxItems,
       paginationItems,
       updateOffset,
@@ -117,6 +127,7 @@ export default {
                 title: "_A_PAGINATION_FIRST_PAGE_",
                 iconLeft: "DoubleAngleLeft",
                 onClick: this.updateOffsetFirst,
+                onKeydown: this.keyDownUpdateOffsetFirst,
               }),
             ]),
             h("li", {
@@ -130,6 +141,7 @@ export default {
                 title: "_A_PAGINATION_PREVIOUS_PAGE_",
                 iconLeft: "AngleLeft",
                 onClick: this.updateOffsetPrevious,
+                onKeydown: this.keyDownUpdateOffsetPrevious,
               }),
             ]),
               this.mode === "short" ?
@@ -167,6 +179,7 @@ export default {
                       textAriaHidden: true,
                       title: "_A_PAGINATION_TO_PAGE_{{page}}_",
                       onClick: () => this.updateOffset(item),
+                      onKeydown: $event => this.keyDownUpdateOffset($event, item),
                     }),
                   ]);
                 }),
@@ -181,6 +194,7 @@ export default {
                 title: "_A_PAGINATION_NEXT_PAGE_",
                 iconLeft: "AngleRight",
                 onClick: this.updateOffsetNext,
+                onKeydown: this.keyDownUpdateOffsetNext,
               }),
             ]),
             h("li", {
@@ -194,6 +208,7 @@ export default {
                 title: "_A_PAGINATION_LAST_PAGE_",
                 iconLeft: "DoubleAngleRight",
                 onClick: this.updateOffsetLast,
+                onKeydown: this.keyDownUpdateOffsetLast,
               }),
             ]),
           ]),

package/src/APagination/APaginationPages/compositionAPI/UpdateOffsetAPI.js

@@ -3,6 +3,8 @@ import {
   toRef,
 } from "vue";
 
+import AKeysCode from "../../../const/AKeysCode";
+
 export default function UpdateOffsetAPI(props, { emit }, {
   currentItem = computed(() => 1),
   disabledButtonFirstPage = computed(() => false),
@@ -49,7 +51,57 @@ export default function UpdateOffsetAPI(props, { emit }, {
     emit("update:offset", offset.value + limit.value);
   };
 
+  const keyDownUpdateOffsetFirst = $event => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      updateOffsetFirst();
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
+  const keyDownUpdateOffset = ($event, item) => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      updateOffset(item);
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
+  const keyDownUpdateOffsetPrevious = $event => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      updateOffsetPrevious();
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
+  const keyDownUpdateOffsetLast = $event => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      updateOffsetLast();
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
+  const keyDownUpdateOffsetNext = $event => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      updateOffsetNext();
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
   return {
+    keyDownUpdateOffset,
+    keyDownUpdateOffsetFirst,
+    keyDownUpdateOffsetLast,
+    keyDownUpdateOffsetNext,
+    keyDownUpdateOffsetPrevious,
     updateOffset,
     updateOffsetFirst,
     updateOffsetLast,

package/src/ATable/ATablePreviewDown/ATablePreviewDown.js

@@ -1,9 +1,12 @@
 import {
-  h,
+  h, onMounted,
 } from "vue";
 
 import AButton from "../../AButton/AButton";
 
+import AriaLabelAPI from "./compositionAPI/AriaLabelAPI";
+import FocusAPI from "./compositionAPI/FocusAPI";
+
 export default {
   name: "ATablePreviewDown",
   props: {
@@ -19,9 +22,31 @@ export default {
   inject: [
     "onTogglePreview",
   ],
+  setup() {
+    const {
+      previewAriaLabel,
+    } = AriaLabelAPI();
+
+    const {
+      componentRef,
+      setFocusToComponent,
+    } = FocusAPI();
+
+    onMounted(() => {
+      setFocusToComponent();
+    });
+
+    return {
+      componentRef,
+      previewAriaLabel,
+    };
+  },
   render() {
     return h("div", {
+      ref: "componentRef",
       class: "a_table__preview_down",
+      tabindex: -1,
+      "aria-label": this.previewAriaLabel,
     }, [
       this.$slots.previewDown && this.$slots.previewDown({
         row: this.row,

package/src/ATable/ATablePreviewDown/compositionAPI/AriaLabelAPI.js

@@ -0,0 +1,19 @@
+import {
+  computed,
+} from "vue";
+
+import {
+  getTranslatedText,
+} from "../../../ATranslation/compositionAPI/UtilsAPI";
+
+export default function AriaLabelAPI() {
+  const previewAriaLabel = computed(() => {
+    return getTranslatedText({
+      placeholder: "_A_TABLE_PREVIEW_DOWN_ARIA_LABEL_",
+    });
+  });
+
+  return {
+    previewAriaLabel,
+  };
+}

package/src/ATable/ATablePreviewDown/compositionAPI/FocusAPI.js

@@ -0,0 +1,16 @@
+import {
+  ref,
+} from "vue";
+
+export default function FocusAPI() {
+  const componentRef = ref(undefined);
+
+  const setFocusToComponent = () => {
+    componentRef.value?.focus();
+  };
+
+  return {
+    componentRef,
+    setFocusToComponent,
+  };
+}

package/src/ATable/ATablePreviewRight/ATablePreviewRight.js

@@ -9,7 +9,9 @@ import ACloak from "../../ACloak/ACloak";
 import AResizer from "../../AResizer/AResizer";
 import ATranslation from "../../ATranslation/ATranslation";
 
+import AriaLabelAPI from "./compositionAPI/AriaLabelAPI";
 import ArrowsAPI from "./compositionAPI/ArrowsAPI";
+import IdAPI from "./compositionAPI/IdAPI";
 import MouseEventsAPI from "./compositionAPI/MouseEventsAPI";
 import PreviewRightRewAPI from "../compositionAPI/PreviewRightRewAPI";
 import RowAPI from "./compositionAPI/RowAPI";
@@ -74,6 +76,14 @@ export default {
       previewRef,
     } = PreviewRightRewAPI();
 
+    const {
+      idLocal,
+    } = IdAPI();
+
+    const {
+      previewAriaLabel,
+    } = AriaLabelAPI();
+
     const {
       mousedown,
       mousemove,
@@ -117,9 +127,11 @@ export default {
       currentRow,
       disabledBtnArrowLeft,
       disabledBtnArrowRight,
+      idLocal,
       mousedown,
       mousemove,
       mouseup,
+      previewAriaLabel,
       previewRef,
       rowNumber,
       rowNumberFormatted,
@@ -130,8 +142,11 @@ export default {
   render() {
     return h("div", {
       ref: "previewRef",
+      id: this.idLocal,
+      "aria-label": this.previewAriaLabel,
       class: "a_table__preview_right",
       style: this.previewStyles,
+      tabindex: -1,
     }, [
       h(AResizer, {
         class: "a_table__preview_right__resizer",

package/src/ATable/ATablePreviewRight/compositionAPI/AriaLabelAPI.js

@@ -0,0 +1,19 @@
+import {
+  computed,
+} from "vue";
+
+import {
+  getTranslatedText,
+} from "../../../ATranslation/compositionAPI/UtilsAPI";
+
+export default function AriaLabelAPI() {
+  const previewAriaLabel = computed(() => {
+    return getTranslatedText({
+      placeholder: "_A_TABLE_PREVIEW_RIGHT_ARIA_LABEL_",
+    });
+  });
+
+  return {
+    previewAriaLabel,
+  };
+}

package/src/ATable/ATablePreviewRight/compositionAPI/IdAPI.js

@@ -0,0 +1,20 @@
+import {
+  computed,
+  inject,
+} from "vue";
+
+import {
+  getPreviewRightId,
+} from "../../utils/utils";
+
+export default function IdAPI() {
+  const tableId = inject("tableId");
+
+  const idLocal = computed(() => {
+    return getPreviewRightId({ tableId: tableId.value });
+  });
+
+  return {
+    idLocal,
+  };
+}

package/src/ATable/ATableTd/compositionAPI/AttributesAPI.js

@@ -6,20 +6,12 @@ import {
 
 import ColumnStylesAPI from "../../compositionAPI/ColumnStylesAPI";
 
-import {
-  isClickTags,
-} from "../../utils/utils";
-
 export default function AttributesAPI(props) {
   const column = toRef(props, "column");
-  const disabledPreview = toRef(props, "disabledPreview");
   const isFooter = toRef(props, "isFooter");
-  const row = toRef(props, "row");
-  const rowIndex = toRef(props, "rowIndex");
 
   const hasPreview = inject("hasPreview");
   const isMobile = inject("isMobile");
-  const onTogglePreview = inject("onTogglePreview");
 
   const {
     columnsStyles,
@@ -39,27 +31,7 @@ export default function AttributesAPI(props) {
     if (!isMobile.value) {
       ATTRIBUTES.role = "cell";
     }
-    if (hasPreview.value && !isFooter.value) {
-      ATTRIBUTES.onClick = $event => {
-        if (disabledPreview.value) {
-          return;
-        }
-        if (isClickTags({
-          $event,
-          tagsName: [
-            "A",
-            "BUTTON",
-          ],
-          classStop: "a_table__td",
-        })) {
-          return;
-        }
-        onTogglePreview({
-          row: row.value,
-          rowIndex: rowIndex.value,
-        });
-      };
-    }
+
     return ATTRIBUTES;
   });
 

package/src/ATable/ATableTr/compositionAPI/AttributesAPI.js

@@ -3,9 +3,20 @@ import {
   inject,
   toRef,
 } from "vue";
-import { isFunction } from "lodash-es";
+
+import AKeysCode from "../../../const/AKeysCode";
+import {
+  isClickTags,
+} from "../../utils/utils";
+import {
+  getTranslatedText,
+} from "../../../ATranslation/compositionAPI/UtilsAPI";
+import {
+  isFunction,
+} from "lodash-es";
 
 export default function AttributesAPI(props) {
+  const disabledPreview = toRef(props, "disabledPreview");
   const isFooter = toRef(props, "isFooter");
   const row = toRef(props, "row");
   const rowClass = toRef(props, "rowClass");
@@ -13,6 +24,7 @@ export default function AttributesAPI(props) {
 
   const hasPreview = inject("hasPreview");
   const isMobile = inject("isMobile");
+  const onTogglePreview = inject("onTogglePreview");
   const previewRightRowIndex = inject("previewRightRowIndex");
   const previewRightRowIndexLast = inject("previewRightRowIndexLast");
   const tableId = inject("tableId");
@@ -45,8 +57,8 @@ export default function AttributesAPI(props) {
     return [
       "a_table__row a_table__row_hover",
       {
-        a_table__row_focus: isPreviewRightForCurrentRowOpen.value,
-        a_table__row_focus_was: isPreviewRightForCurrentRowWasOpen.value,
+        a_table__row_preview_open: isPreviewRightForCurrentRowOpen.value,
+        a_table__row_preview_was_open: isPreviewRightForCurrentRowWasOpen.value,
       },
       rowClassLocal.value
     ];
@@ -56,14 +68,55 @@ export default function AttributesAPI(props) {
     return isMobile.value ? "listitem" : "row";
   });
 
+  const previewAriaLabel = computed(() => {
+    return getTranslatedText({
+      placeholder: isPreviewRightForCurrentRowOpen.value ?
+        "_A_TABLE_ROW_PREVIEW_CLOSE_" :
+        "_A_TABLE_ROW_PREVIEW_OPEN_",
+    });
+  });
+
+  const onClickRow = $event => {
+    if (disabledPreview.value) {
+      return;
+    }
+    if (isClickTags({
+      $event,
+      tagsName: [
+        "A",
+        "BUTTON",
+      ],
+      classStop: "a_table__row",
+    })) {
+      return;
+    }
+
+    $event.stopPropagation();
+    $event.preventDefault();
+
+    onTogglePreview({
+      row: row.value,
+      rowIndex: rowIndex.value,
+    });
+  };
+
+  const onKeydownRow = $event => {
+    if ($event.keyCode === AKeysCode.enter) {
+      onClickRow($event);
+    }
+  };
+
   const rowAttributes = computed(() => {
     const ATTRIBUTES = {
       id: rowId.value,
       class: rowClassComputed.value,
       role: roleLocal.value,
     };
-    if (hasPreview.value) {
-      ATTRIBUTES.tabindex = -1;
+    if (hasPreview.value && !isFooter.value) {
+      ATTRIBUTES.tabindex = 0;
+      ATTRIBUTES["aria-label"] = previewAriaLabel.value;
+      ATTRIBUTES.onClick = onClickRow;
+      ATTRIBUTES.onKeydown = onKeydownRow;
     }
     return ATTRIBUTES;
   });

package/src/ATable/compositionAPI/PreviewAPI.js

@@ -10,6 +10,9 @@ import PreviewRightResizeAPI from "./PreviewRightResizeAPI";
 import {
   setFocusToElement,
 } from "../../utils/utilsDOM";
+import {
+  getPreviewRightId,
+} from "../utils/utils";
 import {
   isNil,
   isUndefined,
@@ -50,6 +53,13 @@ export default function PreviewAPI(props, context, {
     });
   };
 
+  const setFocusToPreviewRight = () => {
+    setTimeout(() => {
+      const PREVIEW_ID = `#${ getPreviewRightId({ tableId: tableId.value }) }`;
+      setFocusToElement({ selector: PREVIEW_ID });
+    });
+  };
+
   const isPreviewRight = computed(() => {
     return preview.value === "right";
   });
@@ -58,6 +68,7 @@ export default function PreviewAPI(props, context, {
   const isPreviewRightOpen = computed(() => {
     return !isNil(previewRightRowIndex.value);
   });
+
   const closePreviewRight = () => {
     setFocusToRow({
       rowIndex: previewRightRowIndex.value,
@@ -71,6 +82,7 @@ export default function PreviewAPI(props, context, {
     previewRightRowIndex.value = undefined;
     removeEventListenerWindowResize();
   };
+
   const closePreviewRightAll = () => {
     emit("togglePreview", {
       row: rowsLocalAll.value[previewRightRowIndex.value],
@@ -85,10 +97,13 @@ export default function PreviewAPI(props, context, {
   const isPreviewDown = computed(() => {
     return preview.value === "down";
   });
+
   const previewDownRowIndexes = ref({});
+
   const closePreviewDown = ({ rowIndex }) => {
     previewDownRowIndexes.value[rowIndex] = undefined;
   };
+
   const closePreviewDownAll = () => {
     previewDownRowIndexes.value = {};
   };
@@ -122,6 +137,8 @@ export default function PreviewAPI(props, context, {
     });
     previewRightRowIndex.value = rowIndex;
     previewRightRowIndexLast.value = undefined;
+
+    setFocusToPreviewRight();
   };
 
   const onTogglePreviewRight = ({ rowIndex }) => {

package/src/ATable/i18n/de.json

@@ -31,5 +31,9 @@
   "_A_TABLE_OPTIONS_BTN_EYE_TITLE_": "Spalte ausblenden",
   "_A_TABLE_OPTIONS_BTN_EYE_CLOSED_TITLE_": "Spalte einblenden",
   "_A_TABLE_OPTIONS_BTN_ARROW_UP_TITLE_": "Spalte nach links verschieben",
-  "_A_TABLE_OPTIONS_BTN_ARROW_DOWN_TITLE_": "Spalte nach rechts verschieben"
+  "_A_TABLE_OPTIONS_BTN_ARROW_DOWN_TITLE_": "Spalte nach rechts verschieben",
+  "_A_TABLE_ROW_PREVIEW_CLOSE_": "Vorschau der Zeile schließen",
+  "_A_TABLE_ROW_PREVIEW_OPEN_": "Vorschau der Zeile öffnen",
+  "_A_TABLE_PREVIEW_DOWN_ARIA_LABEL_": "Vorschau der Zeile",
+  "_A_TABLE_PREVIEW_RIGHT_ARIA_LABEL_": "Vorschau der Zeile"
 }

package/src/ATable/i18n/ru.json

@@ -31,5 +31,9 @@
   "_A_TABLE_OPTIONS_BTN_EYE_TITLE_": "Скрыть столбец",
   "_A_TABLE_OPTIONS_BTN_EYE_CLOSED_TITLE_": "Показать столбец",
   "_A_TABLE_OPTIONS_BTN_ARROW_UP_TITLE_": "Передвинуть столбец влево",
-  "_A_TABLE_OPTIONS_BTN_ARROW_DOWN_TITLE_": "Передвинуть столбец вправо"
+  "_A_TABLE_OPTIONS_BTN_ARROW_DOWN_TITLE_": "Передвинуть столбец вправо",
+  "_A_TABLE_ROW_PREVIEW_CLOSE_": "Закрыть  предпросмотр строки",
+  "_A_TABLE_ROW_PREVIEW_OPEN_": "Открыть предпросмотр строки",
+  "_A_TABLE_PREVIEW_DOWN_ARIA_LABEL_": "Предпросмотр строки",
+  "_A_TABLE_PREVIEW_RIGHT_ARIA_LABEL_": "Предпросмотр строки"
 }

package/src/ATable/utils/utils.js

@@ -66,3 +66,7 @@ export function isColumnVisible({ column, columnIndex, modelIsTableWithoutScroll
     modelColumnsVisibleLocal,
   });
 }
+
+export function getPreviewRightId({ tableId }) {
+  return `${ tableId }_preview_right`;
+}

package/src/styles/components/ATable.scss

@@ -9,8 +9,10 @@
   --a_table_row_border_bottom_width: 2px;
   --a_table_row_border_bottom_color: var(--a_color_gray_500);
   --a_table_row_hover_bg: #e1f2ff;
-  --a_table_row_preview_focus_bg: #D0DD98;
-  --a_table_row_preview_focus_was_bg: #ECF1D5;
+  --a_table_row_focus_shadow_size: inset 0 0 1px 3px;
+  --a_table_row_focus_shadow_color: var(--a_color_focus);
+  --a_table_row_preview_open_bg: #D0DD98;
+  --a_table_row_preview_was_open_bg: #ECF1D5;
   --a_table_td_border_left_width: 2px;
   --a_table_td_border_left_color: var(--a_color_gray_200);
   --a_table_cell_padding_x: .5rem;
@@ -37,7 +39,7 @@
   --a_table_multiple_bg: var(--a_color_gray_100, #fff);
   --a_table_multiple_header_text_font_size: 1rem;
   --a_table_multiple_items_selected_border: 1px solid var(-a_table_row_preview_focus_bg);
-  --a_table_multiple_items_selected_bg: var(--a_table_row_preview_focus_was_bg);
+  --a_table_multiple_items_selected_bg: var(--a_table_row_preview_was_open_bg);
   --a_table_sort_sequence_num_bg: var(--a_color_primary);
   --a_table_sort_sequence_num_color: var(--a_color_white);
 
@@ -103,6 +105,10 @@
   display: flex;
   border-bottom: var(--a_table_row_border_bottom_width) solid var(--a_table_row_border_bottom_color);
   background-color: var(--a_table_bg);
+  &:focus {
+    outline: none;
+    box-shadow: var(--a_table_row_focus_shadow_size) var(--a_table_row_focus_shadow_color);
+  }
 }
 .a_table__head__row {
   background-color: var(--a_table_th_bg);
@@ -182,6 +188,9 @@
   .a_dropdown__item_text {
     color: var(--a_color_gray_600);
   }
+  .a_table__th__dropdown_item__icon_btn {
+    color: var(--a_color_gray_600);
+  }
 }
 
 .a_table__th__dropdown__li_over {
@@ -231,11 +240,11 @@
   .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_preview_open {
+    background-color: var(--a_table_row_preview_open_bg);
   }
-  .a_table__row.a_table__row_focus_was {
-    background-color: var(--a_table_row_preview_focus_was_bg);
+  .a_table__row.a_table__row_preview_was_open {
+    background-color: var(--a_table_row_preview_was_open_bg);
   }
 }
 .a_table__td {
@@ -421,6 +430,10 @@
   border-width: var(--a_table_preview_right_border_width);
   border-style: solid;
   border-color: var(--a_table_preview_right_border_color);
+
+  &:focus {
+    box-shadow: var(--a_table_row_focus_shadow_size) var(--a_table_row_focus_shadow_color);
+  }
 }
 .a_table__preview_right__header {
   background-color: var(--a_table_preview_right_header_bg);
@@ -532,6 +545,10 @@
   padding: var(--a_table_preview_down_padding_y) var(--a_table_preview_down_padding_left) var(--a_table_preview_down_padding_y) var(--a_table_preview_down_padding_left);
   position: relative;
   min-height: 50px;
+
+  &:focus {
+    box-shadow: var(--a_table_row_focus_shadow_size) var(--a_table_row_focus_shadow_color);
+  }
   .a_table__preview_down__btn_close {
     line-height: 1;
     padding: 0;

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

@@ -1,20 +1,37 @@
 .a_datepicker_range {
+  --a_input_datepicker_range_width: 100%;
+  --a_input_datepicker_range_max_width: 100%;
+  --a_input_datepicker_range_min_width: 100px;
+
   --a_datepicker_range_label_padding_right: .5rem;
-  --a_datepicker_range_label_max_padding_left: .5rem;
+  --a_datepicker_range_label_max_margin_left: 6px;
   --a_datepicker_range_label_white_space: nowrap;
+
+  .a_form_element {
+    width: var(--a_input_datepicker_range_width);
+    max-width: var(--a_input_datepicker_range_max_width);
+    min-width: var(--a_input_datepicker_range_min_width);
+  }
 }
 .a_datepicker_range__content {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: .5rem;
+}
+.a_datepicker_range__group {
+  display: flex;
+  align-items: center;
+  flex-basis: 50%;
 }
 .a_datepicker_range__label {
   margin-right: var(--a_datepicker_range_label_padding_right);
   white-space: var(--a_datepicker_range_label_white_space);
 }
 .a_datepicker_range__label_max {
-  margin-left: var(--a_datepicker_range_label_max_padding_left);
+  margin-left: var(--a_datepicker_range_label_max_margin_left);
 }
 
 .a_datepicker_range__help_text {
   padding-left: 10px;
-}
+}

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

@@ -1,22 +1,23 @@
 .a_input_number_range {
   --a_input_number_range_label_padding_right: .5rem;
-  --a_input_number_range_label_max_padding_left: .5rem;
+  --a_input_number_range_label_max_margin_left: 6px;
   --a_input_number_range_label_white_space: nowrap;
 }
 .a_input_number_range__content {
   display: flex;
   align-items: center;
-  // flex-wrap: wrap;
+   flex-wrap: wrap;
+  row-gap: .5rem;
 }
 .a_input_number_range__group {
   display: flex;
   align-items: center;
-  // flex-wrap: wrap;
+  flex-basis: 50%;
 }
 .a_input_number_range__label {
   margin-right: var(--a_input_number_range_label_padding_right);
   white-space: var(--a_input_number_range_label_white_space);
 }
 .a_input_number_range__label_max {
-  margin-left: var(--a_input_number_range_label_max_padding_left);
+  margin-left: var(--a_input_number_range_label_max_margin_left);
 }

package/src/ui/ADatepicker/compositionAPI/AttributesAPI.js

@@ -61,7 +61,7 @@ export default function AttributesAPI(props, {
   });
 
   const widthLocal = computed(() => {
-    if (isNumber(width.value) || (isString(width.value) && /^\d+$/.test(this.width))) {
+    if (isNumber(width.value) || (isString(width.value) && /^\d+$/.test(width.value))) {
       return width.value + "px";
     }
     return width.value;

package/src/ui/ADatepickerRange/ADatepickerRange.js

@@ -123,7 +123,7 @@ export default {
       default: "date",
     },
     inputWidth: {
-      type: Number,
+      type: [Number, String],
       required: false,
       default: 270,
     },
@@ -294,64 +294,72 @@ export default {
         h("div", {
           class: "a_datepicker_range__content",
         }, [
-          h(ALabel, {
-            id: this.idFrom,
-            labelClass: "a_datepicker_range__label a_datepicker_range__label_min",
-            isLabelFloat: false,
-            label: this.labelFrom,
-          }),
-          h(ADatepicker, {
-            id: this.idFrom,
-            ref: "from",
-            inputAttr: this.inputAttributesFromLocal,
-            modelValue: this.modelValueFrom,
-            formatSave: this.formatSave,
-            firstDayOfWeek: this.firstDayOfWeek,
-            appendToBody: this.appendToBody,
-            popupStyle: this.popupStyle,
-            iconDay: this.iconDay,
-            inputName: this.inputName,
-            placement: this.placement,
-            clearable: this.clearable,
-            shortcuts: this.shortcuts,
-            lang: this.lang,
-            inputClass: this.inputClass,
-            placeholder: this.placeholderFrom,
-            disabled: this.disabled || this.disabledFrom,
-            width: this.inputWidth,
-            format: this.format,
-            type: "date",
-            onChange: this.changeModelFrom,
-          }),
-          h(ALabel, {
-            id: this.idUntil,
-            labelClass: "a_datepicker_range__label a_datepicker_range__label_max",
-            isLabelFloat: false,
-            label: this.labelUntil,
-          }),
-          h(ADatepicker, {
-            id: this.idUntil,
-            ref: "until",
-            modelValue: this.modelValueUntil,
-            formatSave: this.formatSave,
-            firstDayOfWeek: this.firstDayOfWeek,
-            appendToBody: this.appendToBody,
-            popupStyle: this.popupStyle,
-            iconDay: this.iconDay,
-            inputName: this.inputName,
-            placement: this.placement,
-            clearable: this.clearable,
-            shortcuts: this.shortcuts,
-            lang: this.lang,
-            inputClass: this.inputClass,
-            placeholder: this.placeholderUntil,
-            disabled: this.disabled || this.disabledUntil,
-            width: this.inputWidth,
-            format: this.format,
-            type: "date",
-            inputAttr: this.inputAttributesUntilLocal,
-            onChange: this.changeModelUntil,
-          }),
+          h("div", {
+            class: "a_datepicker_range__group a_datepicker_range__group_min"
+          }, [
+            h(ALabel, {
+              id: this.idFrom,
+              labelClass: "a_datepicker_range__label a_datepicker_range__label_min",
+              isLabelFloat: false,
+              label: this.labelFrom,
+            }),
+            h(ADatepicker, {
+              id: this.idFrom,
+              ref: "from",
+              inputAttr: this.inputAttributesFromLocal,
+              modelValue: this.modelValueFrom,
+              formatSave: this.formatSave,
+              firstDayOfWeek: this.firstDayOfWeek,
+              appendToBody: this.appendToBody,
+              popupStyle: this.popupStyle,
+              iconDay: this.iconDay,
+              inputName: this.inputName,
+              placement: this.placement,
+              clearable: this.clearable,
+              shortcuts: this.shortcuts,
+              lang: this.lang,
+              inputClass: this.inputClass,
+              placeholder: this.placeholderFrom,
+              disabled: this.disabled || this.disabledFrom,
+              width: this.inputWidth,
+              format: this.format,
+              type: "date",
+              onChange: this.changeModelFrom,
+            }),
+          ]),
+          h("div", {
+            class: "a_datepicker_range__group"
+          }, [
+            h(ALabel, {
+              id: this.idUntil,
+              labelClass: "a_datepicker_range__label a_datepicker_range__label_max",
+              isLabelFloat: false,
+              label: this.labelUntil,
+            }),
+            h(ADatepicker, {
+              id: this.idUntil,
+              ref: "until",
+              modelValue: this.modelValueUntil,
+              formatSave: this.formatSave,
+              firstDayOfWeek: this.firstDayOfWeek,
+              appendToBody: this.appendToBody,
+              popupStyle: this.popupStyle,
+              iconDay: this.iconDay,
+              inputName: this.inputName,
+              placement: this.placement,
+              clearable: this.clearable,
+              shortcuts: this.shortcuts,
+              lang: this.lang,
+              inputClass: this.inputClass,
+              placeholder: this.placeholderUntil,
+              disabled: this.disabled || this.disabledUntil,
+              width: this.inputWidth,
+              format: this.format,
+              type: "date",
+              inputAttr: this.inputAttributesUntilLocal,
+              onChange: this.changeModelUntil,
+            }),
+          ]),
           h(AFormHelpText, {
             class: "a_datepicker_range__help_text",
             id: this.helpTextId,

package/src/ui/ADatepickerRange/utils/Types.js

@@ -0,0 +1,14 @@
+import {
+  forEach,
+} from "lodash-es";
+
+const TYPES = ["datepickerRange", "dateRange"];
+
+export default TYPES;
+
+const TYPES_MAP = {};
+forEach(TYPES, type => {
+  TYPES_MAP[type] = true;
+});
+
+export const typesMapDatepickerRange = TYPES_MAP;