aloha-vue 1.2.87 → 1.2.89

package/package.json

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

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

@@ -20,13 +20,14 @@ export default function FilterSpecificTypeAPI(props) {
     const ATTRIBUTES = {};
     const IS_NUMBER_RANGE = typesMapInputNumberRange[filter.value.type];
     const IS_DATEPICKER_RANGE = typesMapDatepickerRange[filter.value.type];
-    if (IS_NUMBER_RANGE || IS_DATEPICKER_RANGE) {
+    if (IS_NUMBER_RANGE) {
       if (isUndefined(filter.value.inputWidth)) {
         ATTRIBUTES.inputWidth = "auto";
       }
     }
 
     if (IS_DATEPICKER_RANGE) {
+      ATTRIBUTES.inputWidth = "inherit";
       ATTRIBUTES.inputAttributes = {
         style: "min-width: 181px",
       };

package/src/ATable/ATableTopPanel/ATableTopPanel.js

@@ -231,6 +231,7 @@ export default {
             dropdownAttributes: {
               buttonText: "Aktionen",
               buttonClass: "a_btn a_btn_secondary a_table__action",
+              inBody: true,
               placement: "bottom-end",
             },
           }),
@@ -243,8 +244,9 @@ export default {
             minDropdownActions: 0,
             dropdownAttributes: {
               id: this.buttonMultipleId,
-              buttonText: "Mehrfachaktionen",
               buttonClass: "a_btn a_btn_secondary a_table__action",
+              buttonText: "Mehrfachaktionen",
+              inBody: true,
               placement: "bottom-end",
             },
           }),

package/src/styles/components/AFilters.scss

@@ -70,9 +70,15 @@
   margin-top: 1rem;
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: .5rem;
+  column-gap: .5rem;
   &:first-child {
     margin-top: 0;
   }
+  .a_filters_top__search {
+    margin-left: 0;
+  }
 }
 .a_filters_top__footer__select {
   display: inline-block;

package/src/styles/components/ATable.scss

@@ -26,6 +26,8 @@
   --a_table_preview_right_border_color: #f1f4f7;
   --a_table_preview_right_header_bg: #f1f4f7;
   --a_table_preview_right_header_font_size: 1.5rem;
+  --a_table_preview_right_shadow_size: -2px 0 3px 1px;;
+  --a_table_preview_right_shadow_color: var(--a_color_gray_600);
   --a_table_preview_down_border_width: 4px;
   --a_table_preview_down_border_color: var(--a_color_gray_400);
   --a_table_preview_down_padding_y: 1.5rem;
@@ -430,9 +432,10 @@
   border-width: var(--a_table_preview_right_border_width);
   border-style: solid;
   border-color: var(--a_table_preview_right_border_color);
+  box-shadow: var(--a_table_preview_right_shadow_size) var(--a_table_preview_right_shadow_color);
 
   &:focus {
-    box-shadow: var(--a_table_row_focus_shadow_size) var(--a_table_row_focus_shadow_color);
+    --a_table_preview_right_shadow_color: var(--a_table_row_focus_shadow_color);
   }
 }
 .a_table__preview_right__header {

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

@@ -7,6 +7,8 @@
   --a_datepicker_range_label_max_margin_left: 6px;
   --a_datepicker_range_label_white_space: nowrap;
 
+  --a_datepicker_range_group_flex_basis: 230px;
+
   .a_form_element {
     width: var(--a_input_datepicker_range_width);
     max-width: var(--a_input_datepicker_range_max_width);
@@ -18,11 +20,18 @@
   align-items: center;
   flex-wrap: wrap;
   row-gap: .5rem;
+  column-gap: .5rem;
 }
 .a_datepicker_range__group {
   display: flex;
   align-items: center;
-  flex-basis: 50%;
+  flex-wrap: wrap;
+  flex-basis: var(--a_datepicker_range_group_flex_basis);
+  flex-grow: 1;
+
+  .a_form_element_label {
+    display: flex;
+  }
 }
 .a_datepicker_range__label {
   margin-right: var(--a_datepicker_range_label_padding_right);

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

@@ -2,17 +2,25 @@
   --a_input_number_range_label_padding_right: .5rem;
   --a_input_number_range_label_max_margin_left: 6px;
   --a_input_number_range_label_white_space: nowrap;
+  --a_input_number_range_group_flex_basis: 230px;
 }
 .a_input_number_range__content {
   display: flex;
   align-items: center;
-   flex-wrap: wrap;
+  flex-wrap: wrap;
   row-gap: .5rem;
+  column-gap: .5rem;
 }
 .a_input_number_range__group {
   display: flex;
   align-items: center;
-  flex-basis: 50%;
+  flex-wrap: wrap;
+  flex-basis: var(--a_input_number_range_group_flex_basis);
+  flex-grow: 1;
+
+  .a_form_element_label {
+    display: flex;
+  }
 }
 .a_input_number_range__label {
   margin-right: var(--a_input_number_range_label_padding_right);

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

@@ -1,4 +1,12 @@
+.a_form_element__container {
+  display: flex;
+  flex-basis: 181px;
+  flex-grow: 1;
+  width: 100%;
+}
+
 .a_form_element__parent {
+  width: 100%;
   --a_form_element_error_color: var(--a_color_danger);
   --a_form_element_label_float_top: 18px;
 }

package/src/ui/ADatepicker/ADatepicker.js

@@ -446,6 +446,7 @@ export default {
   },
   render() {
     return this.isRender && h("div", {
+      class: "a_form_element__container",
       style: this.componentStyleHide,
     }, [
       h("div", {

package/src/ui/AInputNumber/AInputNumber.js

@@ -264,6 +264,7 @@ export default {
   },
   render() {
     return this.isRender && h("div", {
+      class: "a_form_element__container",
       style: this.componentStyleHide,
     }, [
       h("div", {

package/src/ui/ASelect/ASelectElement/ASelectElement.js

@@ -99,6 +99,7 @@ export default {
 
     const {
       currentLabelFiltered,
+      dataHideWithSearch,
       styleWithSearch,
     } = UiVisibleElementWithSearchAPI(props, {
       labelLocal,
@@ -107,6 +108,7 @@ export default {
 
     return {
       currentLabelFiltered,
+      dataHideWithSearch,
       disabledElement,
       idLocal,
       isChecked,
@@ -123,6 +125,7 @@ export default {
         a_select__menu__link_selected: this.isChecked,
         a_select__menu__link_disabled: this.disabledElement,
       }],
+      "data-hide": this.dataHideWithSearch,
       disabled: this.disabledElement,
       role: "option",
       style: this.styleWithSearch,

package/src/ui/ASelect/compositionAPI/ToggleAPI.js

@@ -21,7 +21,7 @@ import {
   forEach,
 } from "lodash-es";
 
-const ELEMENTS_FOR_ARROWS = ".a_select__element_clickable:not([disabled])";
+const ELEMENTS_FOR_ARROWS = ".a_select__element_clickable:not([disabled]):not([data-hide])";
 
 export default function ToggleAPI(props, {
   emit,

package/src/ui/compositionApi/UiDataFromServerAPI.js

@@ -59,7 +59,7 @@ export default function UiDataFromServerAPI(props, {
   });
 
   const loadDataFromServer = () => {
-    if (!url.value || !searchApiLocal.value) {
+    if (!url.value || searchApiLocal.value) {
       dataFromServer.value = [];
       return;
     }
@@ -151,7 +151,7 @@ export default function UiDataFromServerAPI(props, {
     loadingSearchApi.value = true;
     getListHttp({
       url: url.value,
-      params: {
+      urlParams: {
         ...(urlParams.value || {}),
         [searchApiKey.value]: search,
       },

package/src/ui/compositionApi/UiVisibleElementWithSearchAPI.js

@@ -36,8 +36,15 @@ export default function UiVisibleElementWithSearchAPI(props, {
       undefined;
   });
 
+  const dataHideWithSearch = computed(() => {
+    return isHiddenWithSearchLocal.value ?
+      true :
+      undefined;
+  });
+
   return {
     currentLabelFiltered,
+    dataHideWithSearch,
     styleWithSearch,
   };
 }