aloha-vue 1.2.82 → 1.2.83

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "1.0.2",
-    "aloha-css": "1.0.127",
+    "aloha-css": "1.0.132",
     "axios": "1.4.0",
     "dompurify": "3.0.3",
     "fecha": "4.2.3",

package/docs/src/views/PageFilters/PageFiltersExample/PageFiltersExample.js

@@ -42,6 +42,24 @@ export default {
         label: "_A_PAGE_FILTER_DATE_",
         alwaysVisible: true,
       },
+      {
+        type: "integer",
+        id: "integer",
+        label: "_A_PAGE_FILTER_INTEGER_",
+        alwaysVisible: true,
+      },
+      {
+        type: "dateRange",
+        id: "dateRange",
+        label: "_A_TABLE_FILTER_INPUT_DATE_RANGE_",
+        alwaysVisible: true,
+      },
+      {
+        type: "numberRange",
+        id: "numberRange",
+        label: "_A_TABLE_FILTER_INPUT_NUMBER_RANGE_",
+        alwaysVisible: true,
+      },
     ];
 
     const appliedModel = ref({});

package/docs/src/views/PageFilters/PageFiltersExample/PageFiltersExample.pug

@@ -7,6 +7,7 @@ aloha-example(
 )
   div
     a-filters(
+      :can-save="true"
       :filters="filters"
       v-model:applied-model="appliedModel"
       v-model:unapplied-model="unappliedModel"

package/docs/src/views/PageFilters/i18n/de.json

@@ -1,7 +1,7 @@
 {
   "_A_FILTERS_COMPONENT_DESCRIPTION_": "_A_FILTERS_COMPONENT_DESCRIPTION_",
   "_A_FILTERS_COMPONENT_NAME_": "Filters",
-  "_A_PAGE_FILTER_SEARCH_": "Search",
+  "_A_PAGE_FILTER_SEARCH_": "Schnellsuche",
   "_A_PAGE_FILTER_TEXT_": "Text",
   "_A_PAGE_FILTER_DATE_": "Datum"
 }

package/docs/src/views/PageTable/PageTableSort/PageTableSortExample/PageTableSortExample.js

@@ -31,7 +31,7 @@ export default {
       {
         id: "column1",
         keyLabel: "id",
-        label: "_A_TABLE_COLUMN_1_",
+        label: "_A_TABLE_COLUMN_MULTI_ROWS_",
         sortId: "id",
       },
       {

package/docs/src/views/PageTable/i18n/de.json

@@ -9,6 +9,7 @@
   "_A_TABLE_COLUMN_8_": "Spalte 8",
   "_A_TABLE_COLUMN_9_": "Spalte 9",
   "_A_TABLE_COLUMN_10_": "Spalte 10",
+  "_A_TABLE_COLUMN_MULTI_ROWS_": "Spalte Spalte Spalte Spalte Spalte Spalte Spalte Spalte",
   "_A_TABLE_FILTER_SEARCH_": "Suche",
   "_A_TABLE_FILTER_TEXT_": "Text",
   "_A_TABLE_FILTER_DATE_": "Datum",

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.82",
+  "version": "1.2.83",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"
@@ -38,11 +38,12 @@
   },
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1",
+    "publish": "npm publish --scope=@npm",
     "test": "jest"
   },
   "dependencies": {
     "@floating-ui/vue": "1.0.2",
-    "aloha-css": "1.0.98",
+    "aloha-css": "1.0.132",
     "axios": "^1.4.0",
     "dompurify": "^2.4.1",
     "fecha": "^4.2.3",

package/src/AButton/AButton.js

@@ -47,6 +47,11 @@ export default {
       required: false,
       default: undefined,
     },
+    classDefault: { // TODO: Documentation
+      type: String,
+      required: false,
+      default: "aloha_btn",
+    },
     disabled: {
       type: Boolean,
       required: false,
@@ -300,7 +305,7 @@ export default {
       ref: "buttonRef",
       id: this.id,
       class: [
-        "aloha_btn",
+        this.classDefault,
         this.switchClass,
         this.class,
         {

package/src/AFilters/AFilterCenter/AFilterCenter.js

@@ -2,9 +2,11 @@ import {
   h,
 } from "vue";
 
+import ATranslation from "../../ATranslation/ATranslation";
 import AFilterCenterItem from "./AFilterCenterItem/AFilterCenterItem";
 
 import VisibleFiltersAPI from "./compositionAPI/VisibleFiltersAPI";
+import AButton from "../../AButton/AButton";
 
 export default {
   name: "AFilterCenter",
@@ -13,6 +15,10 @@ export default {
       type: Object,
       required: true,
     },
+    closeAllFilters: {
+      type: Function,
+      required: true,
+    },
     closeFilterValue: {
       type: Function,
       required: true,
@@ -51,12 +57,14 @@ export default {
   },
   render() {
     return h("div", {
-      class: "a_table__filters_center",
+      class: "a_filters_center",
       style: this.styleHide,
     }, [
-      h("span", {
-        class: "a_table__filters_center__headline a_table__filters_center__item",
-      }, "Ihre Auswahl:"),
+      h(ATranslation, {
+        class: "a_filters_center__headline a_filters_center__item",
+        tag: "span",
+        text: "_A_FILTERS_YOUR_SELECTION_",
+      }),
       this.filtersVisibleAll.map(filter => {
         return h(AFilterCenterItem, {
           key: filter.id,
@@ -69,6 +77,15 @@ export default {
           onUpdateVisibleChildFilters: this.updateVisibleChildFilters,
         }, this.$slots);
       }),
+      h("div", {
+        class: "a_filters_center__item",
+      }, [
+        h(AButton, {
+          class: "a_btn a_btn_link a_btn_small",
+          text: "_A_FILTERS_DESELECT_ALL_",
+          onClick: this.closeAllFilters,
+        }),
+      ]),
     ]);
   },
 };

package/src/AFilters/AFilterCenter/AFilterCenterItem/AFilterCenterItem.js

@@ -103,7 +103,7 @@ export default {
       this.modelValuesForCurrentFilter.map(modelValue => {
         return h("div", {
           role: "group",
-          class: "a_table__filters_center__item a_btn_group a_btn_group_small",
+          class: "a_filters_center__item a_btn_group a_btn_group_small",
         }, [
           this.filter.hasNotClose && h(AButton, {
             class: "a_btn a_btn_secondary",
@@ -116,14 +116,14 @@ export default {
             onClick: () => this.goToFilter({ modelValue }),
           }, () => [
             this.filterLabel && h("strong", {
-              class: "a_table__filters_center__item__label",
+              class: "a_filters_center__item__label",
             }, [
               h(ATranslation, {
                 tag: "span",
                 html: this.filterLabel,
               }),
               modelValue.filterLabelSuffix && h(ATranslation, {
-                class: "a_table__filters_center__item__label__suffix",
+                class: "a_filters_center__item__label__suffix",
                 tag: "span",
                 html: modelValue.filterLabelSuffix,
               }),
@@ -134,9 +134,12 @@ export default {
                 item: modelValue.item,
                 label: modelValue.label,
               }) :
-              h("span", {
-                class: "a_table__filters_center__item__value",
-              }, modelValue.label),
+              h(ATranslation, {
+                class: "a_filters_center__item__value",
+                tag: "span",
+                html: modelValue.label,
+                extra: modelValue.extra,
+              }),
           ]),
           !this.filter.hasNotClose && h(AButton, {
             class: "a_btn a_btn_secondary",

package/src/AFilters/AFilterCenter/AFilterCenterItem/compositionAPI/CloseFilterValueAPI.js

@@ -13,7 +13,7 @@ export default function CloseFilterValueAPI(props) {
     }
     closeFilterValue.value({
       filter: filter.value,
-      currentModel: modelValue.value,
+      modelArray: modelValue.modelArray,
       keyId: modelValue.keyId,
     });
   };

package/src/AFilters/AFilterCenter/AFilterCenterItem/compositionAPI/HasFilterAPI.js

@@ -4,23 +4,18 @@ import {
 } from "vue";
 
 import {
-  isArray,
-  isNil,
-} from "lodash-es";
+  hasFilterCenter,
+} from "../../utils/utils";
 
 export default function HasFilterAPI(props) {
   const filter = toRef(props, "filter");
   const model = toRef(props, "model");
 
   const hasCurrentFilter = computed(() => {
-    if (!filter.value ||
-      filter.value.hideFilterCenter ||
-      isNil(model.value) ||
-      model.value === "" ||
-      (isArray(model.value) && !model.value.length)) {
-      return false;
-    }
-    return true;
+    return hasFilterCenter({
+      filter: filter.value,
+      currentModel: model.value,
+    });
   });
 
   return {

package/src/AFilters/AFilterCenter/AFilterCenterItem/compositionAPI/ModelValuesAPI.js

@@ -9,8 +9,9 @@ import AKeyLabel from "../../../../const/AKeyLabel";
 import AUiTypesModelArray from "../../../../ui/const/AUiTypesModelArray";
 import TypesNumberRange from "../../../../ui/AInputNumberRange/utils/Types";
 import {
-  forEach,
-  get, isNil,
+  filter as _filter,
+  get,
+  isNil,
 } from "lodash-es";
 
 
@@ -21,6 +22,11 @@ export default function ModelValuesAPI(props, {
   const filter = toRef(props, "filter");
   const model = toRef(props, "model");
 
+  const {
+    filterBoolean,
+    filterDate,
+  } = AFiltersAPI();
+
   const filterDataKey = computed(() => {
     if (filter.value) {
       return dataKeyByKeyIdPerFilter.value[filter.value.id];
@@ -28,10 +34,14 @@ export default function ModelValuesAPI(props, {
     return undefined;
   });
 
-  const {
-    filterBoolean,
-    filterDate,
-  } = AFiltersAPI();
+  const modelArrayReal = computed(() => {
+    if (model.value?.length) {
+      return _filter(model.value, modelItem => {
+        return filterDataKey.value && filterDataKey.value[modelItem];
+      });
+    }
+    return [];
+  });
 
   const modelValuesForCurrentFilter = computed(() => {
     if (!hasCurrentFilter.value) {
@@ -61,18 +71,27 @@ export default function ModelValuesAPI(props, {
     }
     if (AUiTypesModelArray[filter.value.type] ||
       (filter.value.type === "radio" && filter.value.isModelArray)) {
-      const MODEL_VALUES = [];
-      forEach(model.value, modelItem => {
-        if (filterDataKey.value && filterDataKey.value[modelItem]) {
-          MODEL_VALUES.push({
-            label: filterDataKey.value[modelItem][AKeyLabel],
-            value: modelItem,
-            item: filterDataKey.value[modelItem],
-          });
+      if (modelArrayReal.value.length) {
+        if (modelArrayReal.value.length === 1) {
+          const item = filterDataKey.value?.[modelArrayReal.value[0]];
+
+          return [{
+            label: item?.[AKeyLabel],
+            item,
+            modelArray: modelArrayReal.value,
+          }];
         }
-      });
-      return MODEL_VALUES;
+        return [{
+          label: "_A_FILTERS_SELECTED_{{count}}_",
+          extra: {
+            count: modelArrayReal.value.length,
+            modelArray: modelArrayReal.value,
+          },
+        }];
+      }
+      return [];
     }
+
     if (filter.value.type === "dateRange") {
       const KEY_FROM = filter.value.keyFrom || "from";
       const KEY_UNTIL = filter.value.keyUntil || "until";

package/src/AFilters/AFilterCenter/utils/utils.js

@@ -0,0 +1,15 @@
+import {
+  isArray,
+  isNil,
+} from "lodash-es";
+
+export function hasFilterCenter({ filter, currentModel }) {
+  if (!filter ||
+    filter.hideFilterCenter ||
+    isNil(currentModel) ||
+    currentModel === "" ||
+    (isArray(currentModel) && !currentModel.length)) {
+    return false;
+  }
+  return true;
+}

package/src/AFilters/AFilters/AFilters.js

@@ -95,8 +95,10 @@ export default {
     } = FiltersAPI(props, context);
 
     const {
+      closeAllFilters,
       closeFilterValue,
     } = CloseFilterAPI(props, context, {
+      filtersVisibleAll,
       onUpdateModelFilters,
     });
 
@@ -134,6 +136,7 @@ export default {
     initFiltersSaved();
 
     return {
+      closeAllFilters,
       closeFilterValue,
       dataKeyByKeyIdPerFilter,
       filtersDataKeyById,
@@ -193,6 +196,7 @@ export default {
         h(AFilterCenter, {
           id: this.id,
           appliedModel: this.appliedModel,
+          closeAllFilters: this.closeAllFilters,
           closeFilterValue: this.closeFilterValue,
           dataKeyByKeyIdPerFilter: this.dataKeyByKeyIdPerFilter,
           disabled: this.disabled,

package/src/AFilters/AFilters/compositionAPI/CloseFilterAPI.js

@@ -1,4 +1,5 @@
 import {
+  computed,
   toRef,
 } from "vue";
 
@@ -6,52 +7,100 @@ import AUiTypesModelArray from "../../../ui/const/AUiTypesModelArray";
 import AUiTypesModelObject from "../../../ui/const/AUiTypesModelObject";
 import {
   cloneDeep,
+  filter as _filter,
+  forEach,
   isPlainObject,
 } from "lodash-es";
 
 export default function CloseFilterAPI(props, { emit }, {
+  filtersVisibleAll = computed(() => []),
   onUpdateModelFilters = () => {},
 }) {
   const appliedModel = toRef(props, "appliedModel");
   const unappliedModel = toRef(props, "unappliedModel");
 
-  const closeFilterValue = ({ filter, currentModel, keyId }) => {
+  const closeCurrentFilter = ({ filter, keyId, modelArray, appliedModelLocal, unappliedModelLocal }) => {
     const MODEL_ID = filter.modelId || filter.id;
 
-    const APPLIED_MODEL = cloneDeep(appliedModel.value);
     if (AUiTypesModelArray[filter.type]) {
-      if (APPLIED_MODEL[MODEL_ID] &&
-        APPLIED_MODEL[MODEL_ID].length) {
-        const INDEX_IN_MODEL = APPLIED_MODEL[MODEL_ID].indexOf(currentModel);
-        if (INDEX_IN_MODEL !== -1) {
-          APPLIED_MODEL[MODEL_ID].splice(INDEX_IN_MODEL, 1);
+      if (appliedModelLocal[MODEL_ID] &&
+        appliedModelLocal[MODEL_ID].length) {
+        if (modelArray) {
+          appliedModelLocal[MODEL_ID] = _filter(appliedModelLocal[MODEL_ID], modelItem => {
+            return modelArray.indexOf(modelItem) === -1;
+          });
+        } else {
+          appliedModelLocal[MODEL_ID] = [];
         }
       }
-      if (unappliedModel.value[MODEL_ID] &&
-        unappliedModel.value[MODEL_ID].length) {
-        const INDEX_IN_MODEL = unappliedModel.value[MODEL_ID].indexOf(currentModel);
-        if (INDEX_IN_MODEL !== -1) {
-          const UNAPPLIED_MODEL = cloneDeep(unappliedModel.value);
-          UNAPPLIED_MODEL[MODEL_ID].splice(INDEX_IN_MODEL, 1);
-          emit("update:unappliedModel", UNAPPLIED_MODEL);
+      if (unappliedModelLocal[MODEL_ID] &&
+        unappliedModelLocal[MODEL_ID].length) {
+        if (modelArray) {
+          unappliedModelLocal[MODEL_ID] = _filter(unappliedModelLocal[MODEL_ID], modelItem => {
+            return modelArray.indexOf(modelItem) === -1;
+          });
+        } else {
+          unappliedModelLocal[MODEL_ID] = [];
         }
       }
     } else if (AUiTypesModelObject[filter.type] && keyId) {
-      const UNAPPLIED_MODEL = cloneDeep(unappliedModel.value);
-      if (isPlainObject(UNAPPLIED_MODEL?.[MODEL_ID])) {
-        UNAPPLIED_MODEL[MODEL_ID][keyId] = undefined;
+      if (isPlainObject(unappliedModelLocal?.[MODEL_ID])) {
+        unappliedModelLocal[MODEL_ID][keyId] = undefined;
       }
-      if (isPlainObject(APPLIED_MODEL?.[MODEL_ID])) {
-        APPLIED_MODEL[MODEL_ID][keyId] = undefined;
+      if (isPlainObject(appliedModelLocal?.[MODEL_ID])) {
+        appliedModelLocal[MODEL_ID][keyId] = undefined;
       }
-      emit("update:unappliedModel", UNAPPLIED_MODEL);
     } else {
-      const UNAPPLIED_MODEL = cloneDeep(unappliedModel.value);
-      UNAPPLIED_MODEL[MODEL_ID] = undefined;
-      emit("update:unappliedModel", UNAPPLIED_MODEL);
-      APPLIED_MODEL[MODEL_ID] = undefined;
+      unappliedModelLocal[MODEL_ID] = undefined;
+      appliedModelLocal[MODEL_ID] = undefined;
     }
-    emit("update:appliedModel", APPLIED_MODEL);
+
+    return {
+      appliedModelLocal,
+      unappliedModelLocal,
+    };
+  };
+
+  const closeFilterValue = ({ filter, keyId, modelArray }) => {
+    const APPLIED_MODEL = cloneDeep(appliedModel.value);
+    const UNAPPLIED_MODEL = cloneDeep(unappliedModel.value);
+
+    const {
+      appliedModelLocal,
+      unappliedModelLocal,
+    } = closeCurrentFilter({
+      filter,
+      keyId,
+      modelArray,
+      appliedModelLocal: APPLIED_MODEL,
+      unappliedModelLocal: UNAPPLIED_MODEL,
+    });
+
+    emit("update:unappliedModel", unappliedModelLocal);
+    emit("update:appliedModel", appliedModelLocal);
+
+    setTimeout(() => {
+      onUpdateModelFilters({ model: appliedModel.value });
+    });
+  };
+
+  const closeAllFilters = () => {
+    let appliedModelLocal = cloneDeep(appliedModel.value);
+    let unappliedModelLocal = cloneDeep(unappliedModel.value);
+
+    forEach(filtersVisibleAll.value, filter => {
+      const MODELS_OBJECT = closeCurrentFilter({
+        filter,
+        appliedModelLocal: appliedModelLocal,
+        unappliedModelLocal: unappliedModelLocal,
+      });
+
+      appliedModelLocal = MODELS_OBJECT.appliedModelLocal;
+      unappliedModelLocal = MODELS_OBJECT.unappliedModelLocal;
+    });
+
+    emit("update:unappliedModel", unappliedModelLocal);
+    emit("update:appliedModel", appliedModelLocal);
 
     setTimeout(() => {
       onUpdateModelFilters({ model: appliedModel.value });
@@ -59,6 +108,7 @@ export default function CloseFilterAPI(props, { emit }, {
   };
 
   return {
+    closeAllFilters,
     closeFilterValue,
   };
 }