aloha-vue 1.2.171 → 1.2.172

package/package.json

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

package/src/AFilters/AFilterCenter/AFilterCenter.js

@@ -1,125 +1,125 @@
-import {
-  h,
-} from "vue";
-
-import AButton from "../../AButton/AButton";
-import AFilterCenterItem from "./AFilterCenterItem/AFilterCenterItem";
-import ASpinner from "../../ASpinner/ASpinner";
-
-import LoadingFiltersAPI from "./compositionAPI/LoadingFiltersAPI";
-import VisibleFiltersAPI from "./compositionAPI/VisibleFiltersAPI";
-
-export default {
-  name: "AFilterCenter",
-  props: {
-    appliedModel: {
-      type: Object,
-      required: true,
-    },
-    closeAllFilters: {
-      type: Function,
-      required: true,
-    },
-    closeFilterValue: {
-      type: Function,
-      required: true,
-    },
-    dataKeyByKeyIdPerFilter: {
-      type: Object,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-    filtersGroup: {
-      type: Object,
-      required: true,
-      default: () => ({
-        alwaysVisible: [],
-        filters: [],
-      }),
-    },
-    filtersKeyById: {
-      type: Object,
-      required: true,
-    },
-    filtersVisibleAll: {
-      type: Array,
-      required: true,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const {
-      hasFilters,
-      styleHide,
-      updateVisibleChildFilters,
-    } = VisibleFiltersAPI(props);
-
-    const {
-      isLeastOneChildFilterLoading,
-      updateLoadingChildFilters,
-    } = LoadingFiltersAPI(props);
-
-    return {
-      hasFilters,
-      isLeastOneChildFilterLoading,
-      styleHide,
-      updateLoadingChildFilters,
-      updateVisibleChildFilters,
-    };
-  },
-  render() {
-    if (!this.hasFilters) {
-      return null;
-    }
-
-    return h("div", {
-      class: "a_filters_center",
-    }, [
-      h("div", {
-        class: "a_filters_center__item",
-      }, [
-        this.$slots.filtersHorizontal ?
-          this.$slots.filtersHorizontal() :
-          "",
-      ]),
-      this.filtersVisibleAll.map(filter => {
-        return h(AFilterCenterItem, {
-          key: filter.id,
-          id: this.id,
-          disabled: this.disabled,
-          filter,
-          closeFilterValue: this.closeFilterValue,
-          dataKeyByKeyIdPerFilter: this.dataKeyByKeyIdPerFilter,
-          model: this.appliedModel[filter.modelId || filter.id],
-          onUpdateVisibleChildFilters: this.updateVisibleChildFilters,
-          onUpdateLoadingChildFilters: this.updateLoadingChildFilters,
-        }, this.$slots);
-      }),
-      this.isLeastOneChildFilterLoading ? h("div", {
-        style: this.styleHide,
-        class: "a_filters_center__item",
-      }, [
-        h(ASpinner, {
-          class: "a_spinner_small",
-        }),
-      ]) : "",
-      h("div", {
-        class: "a_filters_center__item",
-        style: this.styleHide,
-      }, [
-        h(AButton, {
-          class: "a_btn a_btn_link a_btn_small",
-          iconLeft: "Reset",
-          text: "_A_FILTERS_DESELECT_ALL_",
-          onClick: this.closeAllFilters,
-        }),
-      ]),
-    ]);
-  },
-};
+import {
+  h,
+} from "vue";
+
+import AButton from "../../AButton/AButton";
+import AFilterCenterItem from "./AFilterCenterItem/AFilterCenterItem";
+import ASpinner from "../../ASpinner/ASpinner";
+
+import LoadingFiltersAPI from "./compositionAPI/LoadingFiltersAPI";
+import VisibleFiltersAPI from "./compositionAPI/VisibleFiltersAPI";
+
+export default {
+  name: "AFilterCenter",
+  props: {
+    appliedModel: {
+      type: Object,
+      required: true,
+    },
+    closeAllFilters: {
+      type: Function,
+      required: true,
+    },
+    closeFilterValue: {
+      type: Function,
+      required: true,
+    },
+    dataKeyByKeyIdPerFilter: {
+      type: Object,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    filtersGroup: {
+      type: Object,
+      required: true,
+      default: () => ({
+        alwaysVisible: [],
+        filters: [],
+      }),
+    },
+    filtersKeyById: {
+      type: Object,
+      required: true,
+    },
+    filtersVisibleAll: {
+      type: Array,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const {
+      hasFilters,
+      styleHide,
+      updateVisibleChildFilters,
+    } = VisibleFiltersAPI(props);
+
+    const {
+      isLeastOneChildFilterLoading,
+      updateLoadingChildFilters,
+    } = LoadingFiltersAPI(props);
+
+    return {
+      hasFilters,
+      isLeastOneChildFilterLoading,
+      styleHide,
+      updateLoadingChildFilters,
+      updateVisibleChildFilters,
+    };
+  },
+  render() {
+    if (!this.hasFilters) {
+      return null;
+    }
+
+    return h("div", {
+      class: "a_filters_center",
+    }, [
+      h("div", {
+        class: "a_filters_center__item",
+      }, [
+        this.$slots.filtersHorizontal ?
+          this.$slots.filtersHorizontal() :
+          "",
+      ]),
+      this.filtersVisibleAll.map(filter => {
+        return h(AFilterCenterItem, {
+          key: filter.modelId || filter.id,
+          id: this.id,
+          disabled: this.disabled,
+          filter,
+          closeFilterValue: this.closeFilterValue,
+          dataKeyByKeyIdPerFilter: this.dataKeyByKeyIdPerFilter,
+          model: this.appliedModel[filter.modelId || filter.id],
+          onUpdateVisibleChildFilters: this.updateVisibleChildFilters,
+          onUpdateLoadingChildFilters: this.updateLoadingChildFilters,
+        }, this.$slots);
+      }),
+      this.isLeastOneChildFilterLoading ? h("div", {
+        style: this.styleHide,
+        class: "a_filters_center__item",
+      }, [
+        h(ASpinner, {
+          class: "a_spinner_small",
+        }),
+      ]) : "",
+      h("div", {
+        class: "a_filters_center__item",
+        style: this.styleHide,
+      }, [
+        h(AButton, {
+          class: "a_btn a_btn_link a_btn_small",
+          iconLeft: "Reset",
+          text: "_A_FILTERS_DESELECT_ALL_",
+          onClick: this.closeAllFilters,
+        }),
+      ]),
+    ]);
+  },
+};

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

@@ -1,42 +1,42 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  typesWithData,
-} from "../../../../ui/const/AUiTypes";
-import {
-  isEmpty,
-} from "lodash-es";
-
-export default function IsDataLoadingAPI(props, { emit }, {
-  hasCurrentFilter = computed(() => false),
-}) {
-  const dataKeyByKeyIdPerFilter = toRef(props, "dataKeyByKeyIdPerFilter");
-  const filter = toRef(props, "filter");
-
-  const isFilterLoading = computed(() => {
-    if (!hasCurrentFilter.value) {
-      return false;
-    }
-    if (typesWithData.value[filter.value.type]) {
-      return isEmpty(dataKeyByKeyIdPerFilter.value[filter.value.id]);
-    }
-    return false;
-  });
-
-  const updateLoadingChildFilters = (newValue, altValue) => {
-    if (newValue !== altValue) {
-      emit("updateLoadingChildFilters", {
-        id: filter.value.id,
-        isLoading: isFilterLoading.value,
-      });
-    }
-  };
-
-  return {
-    isFilterLoading,
-    updateLoadingChildFilters,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  typesWithData,
+} from "../../../../ui/const/AUiTypes";
+import {
+  isEmpty,
+} from "lodash-es";
+
+export default function IsDataLoadingAPI(props, { emit }, {
+  hasCurrentFilter = computed(() => false),
+}) {
+  const dataKeyByKeyIdPerFilter = toRef(props, "dataKeyByKeyIdPerFilter");
+  const filter = toRef(props, "filter");
+
+  const isFilterLoading = computed(() => {
+    if (!hasCurrentFilter.value) {
+      return false;
+    }
+    if (typesWithData.value[filter.value.type]) {
+      return isEmpty(dataKeyByKeyIdPerFilter.value[filter.value.modelId || filter.value.id]);
+    }
+    return false;
+  });
+
+  const updateLoadingChildFilters = (newValue, altValue) => {
+    if (newValue !== altValue) {
+      emit("updateLoadingChildFilters", {
+        id: filter.value.modelId || filter.value.id,
+        isLoading: isFilterLoading.value,
+      });
+    }
+  };
+
+  return {
+    isFilterLoading,
+    updateLoadingChildFilters,
+  };
+}

package/src/AFilters/AFilters/compositionAPI/FiltersAPI.js

@@ -1,133 +1,151 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-
-import {
-  typesContainer,
-} from "../../../ui/const/AUiTypes";
-import {
-  isModelForFilterNotEmpty,
-} from "../../../utils/utilsUi";
-import {
-  cloneDeep,
-  forEach,
-} from "lodash-es";
-
-export default function FiltersAPI(props, { emit }) {
-  const filters = toRef(props, "filters");
-  const filterMain = toRef(props, "filterMain");
-  const unappliedModel = toRef(props, "unappliedModel");
-
-  const filtersDataKeyById = ref({});
-  const filtersHorizontalRef = ref(undefined);
-  const filtersVisibleIds = ref([]);
-
-  const hasFilters = computed(() => {
-    return !!(filters.value.length || filterMain.value);
-  });
-
-  const filtersKeyById = computed(() => {
-    const FILTERS = {};
-    forEach(cloneDeep(filters.value), filter => {
-      FILTERS[filter.id] = filter;
-      if (typesContainer.value[filter.type] &&
-        filter.children &&
-        filter.children.length) {
-        forEach(filter.children, filterChild => {
-          FILTERS[filterChild.id] = filterChild;
-        });
-      }
-    });
-    return FILTERS;
-  });
-
-  const filtersGroup = computed(() => {
-    const FILTER_GROUP = {
-      alwaysVisible: [],
-      filters: [],
-    };
-    forEach(cloneDeep(filters.value), filter => {
-      if (filter.alwaysVisible) {
-        FILTER_GROUP.alwaysVisible.push(filter);
-      } else {
-        FILTER_GROUP.filters.push(filter);
-      }
-    });
-
-    return FILTER_GROUP;
-  });
-
-  const filtersVisible = computed(() => {
-    const FILTERS = [];
-    forEach(filtersVisibleIds.value, filterId => {
-      if (filtersKeyById.value[filterId]) {
-        FILTERS.push(filtersKeyById.value[filterId]);
-      }
-    });
-    return FILTERS;
-  });
-
-  const filtersVisibleAll = computed(() => {
-    const FILTERS = [];
-    FILTERS.push(...filters.value);
-    const FILERS_NEW = [];
-    forEach(FILTERS, filter => {
-      FILERS_NEW.push(filter);
-      if (typesContainer.value[filter.type] &&
-        filter.children &&
-        filter.children.length) {
-        forEach(filter.children, filterChild => {
-          FILERS_NEW.push(filterChild);
-        });
-      }
-    });
-    return FILERS_NEW;
-  });
-
-  const setFiltersVisibleIds = () => {
-    const FILTERS_VISIBLE_IDS = [];
-    forEach(filtersGroup.value.filters, filter => {
-      if (isModelForFilterNotEmpty({
-        filter, modelObj: unappliedModel.value,
-      })) {
-        FILTERS_VISIBLE_IDS.push(filter.id);
-      }
-    });
-    filtersVisibleIds.value = FILTERS_VISIBLE_IDS;
-  };
-
-  const onUpdateModelFilters = ({ model, isUpdateFiltersVisible }) => {
-    emit("update:unappliedModel", model);
-
-    if (isUpdateFiltersVisible) {
-      setTimeout(() => {
-        setFiltersVisibleIds();
-      });
-    }
-  };
-
-  const updateAppliedModel = ({ model }) => {
-    emit("update:appliedModel", model);
-  };
-
-  const updateMainModel = ({ model }) => {
-    emit("update:mainModel", model);
-  };
-
-  return {
-    filtersDataKeyById,
-    filtersGroup,
-    filtersHorizontalRef,
-    filtersKeyById,
-    filtersVisible,
-    filtersVisibleAll,
-    filtersVisibleIds,
-    hasFilters,
-    onUpdateModelFilters,
-    setFiltersVisibleIds,
-    updateAppliedModel,
-    updateMainModel,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  typesContainer,
+} from "../../../ui/const/AUiTypes";
+import {
+  isModelForFilterNotEmpty,
+} from "../../../utils/utilsUi";
+import {
+  cloneDeep,
+  forEach,
+} from "lodash-es";
+
+export default function FiltersAPI(props, { emit }) {
+  const filters = toRef(props, "filters");
+  const filterMain = toRef(props, "filterMain");
+  const unappliedModel = toRef(props, "unappliedModel");
+
+  const filtersDataKeyById = ref({});
+  const filtersHorizontalRef = ref(undefined);
+  const filtersVisibleIds = ref([]);
+
+  const hasFilters = computed(() => {
+    return !!(filters.value.length || filterMain.value);
+  });
+
+  const filtersKeyById = computed(() => {
+    const FILTERS = {};
+    forEach(cloneDeep(filters.value), filter => {
+      FILTERS[filter.modelId || filter.id] = {
+        ...filter,
+        id: filter.modelId || filter.id,
+      };
+      if (typesContainer.value[filter.type] &&
+        filter.children &&
+        filter.children.length) {
+        forEach(filter.children, filterChild => {
+          FILTERS[filter.modelId || filterChild.id] = {
+            ...filterChild,
+            id: filterChild.modelId || filterChild.id,
+          };
+        });
+      }
+    });
+    return FILTERS;
+  });
+
+  const filtersGroup = computed(() => {
+    const FILTER_GROUP = {
+      alwaysVisible: [],
+      filters: [],
+    };
+    forEach(cloneDeep(filters.value), filter => {
+      if (filter.alwaysVisible) {
+        FILTER_GROUP.alwaysVisible.push({
+          ...filter,
+          id: filter.modelId || filter.id,
+        });
+      } else {
+        FILTER_GROUP.filters.push({
+          ...filter,
+          id: filter.modelId || filter.id,
+        });
+      }
+    });
+
+    return FILTER_GROUP;
+  });
+
+  const filtersVisible = computed(() => {
+    const FILTERS = [];
+    forEach(filtersVisibleIds.value, filterId => {
+      if (filtersKeyById.value[filterId]) {
+        FILTERS.push(filtersKeyById.value[filterId]);
+      }
+    });
+    return FILTERS;
+  });
+
+  const filtersVisibleAll = computed(() => {
+    const FILTERS = [];
+    FILTERS.push(...filters.value);
+    const FILERS_NEW = [];
+    forEach(FILTERS, filter => {
+      FILERS_NEW.push({
+        ...filter,
+        id: filter.modelId || filter.id,
+      });
+      if (typesContainer.value[filter.type] &&
+        filter.children &&
+        filter.children.length) {
+        forEach(filter.children, filterChild => {
+          FILERS_NEW.push({
+            ...filterChild,
+            id: filterChild.modelId || filterChild.id,
+          });
+        });
+      }
+    });
+    return FILERS_NEW;
+  });
+
+  const setFiltersVisibleIds = () => {
+    const FILTERS_VISIBLE_IDS = [];
+    forEach(filtersGroup.value.filters, filter => {
+      if (isModelForFilterNotEmpty({
+        filter, modelObj: unappliedModel.value,
+      })) {
+        FILTERS_VISIBLE_IDS.push(filter.id);
+      }
+    });
+    filtersVisibleIds.value = FILTERS_VISIBLE_IDS;
+  };
+
+  const onUpdateModelFilters = ({ model, isUpdateFiltersVisible }) => {
+    emit("update:unappliedModel", model);
+
+    if (isUpdateFiltersVisible) {
+      setTimeout(() => {
+        setFiltersVisibleIds();
+      });
+    }
+  };
+
+  const updateAppliedModel = ({ model }) => {
+    emit("update:appliedModel", model);
+  };
+
+  const updateMainModel = ({ model }) => {
+    emit("update:mainModel", model);
+  };
+
+  return {
+    filtersDataKeyById,
+    filtersGroup,
+    filtersHorizontalRef,
+    filtersKeyById,
+    filtersVisible,
+    filtersVisibleAll,
+    filtersVisibleIds,
+    hasFilters,
+    onUpdateModelFilters,
+    setFiltersVisibleIds,
+    updateAppliedModel,
+    updateMainModel,
+  };
+}

package/src/ui/compositionApi/UiDataFromServerAPI.js

@@ -1,207 +1,216 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-
-import AHttpAPI from "../../compositionAPI/AHttpAPI";
-
-import AKeyId from "../../const/AKeyId";
-import {
-  cloneDeep,
-  filter,
-  find,
-  forEach,
-  get,
-  isArray,
-  isMatch,
-  isNil,
-  isNumber,
-  isString,
-  map,
-  uniq,
-  uniqBy,
-} from "lodash-es";
-
-export default function UiDataFromServerAPI(props, {
-  changeModel = () => {},
-  dataExtraLocal = computed(() => []),
-  dataFromServer = ref([])
-} = {}) {
-  const apiSaveId = toRef(props, "apiSaveId");
-  const isDataSimpleArray = toRef(props, "isDataSimpleArray");
-  const keyId = toRef(props, "keyId");
-  const keyLabel = toRef(props, "keyLabel");
-  const searchApi = toRef(props, "searchApi");
-  const modelValue = toRef(props, "modelValue");
-  const searchApiKey = toRef(props, "searchApiKey");
-  const type = toRef(props, "type");
-  const url = toRef(props, "url");
-  const urlParams = toRef(props, "urlParams");
-
-  const loadingSearchApi = ref(false);
-  const loadingDataFromServer = ref(undefined);
-
-  const {
-    getListHttp,
-  } = AHttpAPI();
-
-  const searchApiLocal = computed(() => {
-    return !!(searchApi.value && searchApiKey.value && url.value);
-  });
-
-  const urlPropsComputed = computed(() => {
-    return [
-      apiSaveId,
-      url,
-      urlParams,
-    ];
-  });
-
-  const loadDataFromServer = () => {
-    if (!url.value || searchApiLocal.value) {
-      dataFromServer.value = [];
-      return;
-    }
-    loadingDataFromServer.value = true;
-    getListHttp({
-      url: url.value,
-      urlParams: urlParams.value,
-      apiSaveId: apiSaveId.value,
-    }).then(
-      response => {
-        dataFromServer.value = response;
-      }
-    ).finally(
-      () => {
-        loadingDataFromServer.value = false;
-      }
-    );
-  };
-
-  const isTypeList = computed(() => {
-    return type.value === "checkbox" || type.value === "multiselect";
-  });
-
-  const updateUrlPropsComputed = (newVal, oldVal) => {
-    if (!isNil(oldVal) && !isMatch(oldVal, newVal)) {
-      loadDataFromServer();
-      if (isTypeList.value) {
-        changeModel({
-          model: [],
-          currentModel: [],
-        });
-      } else {
-        changeModel({
-          model: undefined,
-          currentModel: undefined,
-        });
-      }
-    }
-  };
-
-  const uniqueList = list => {
-    if (isDataSimpleArray.value) {
-      return uniq(list);
-    }
-    return uniqBy(list, keyId.value);
-  };
-
-  const isValidModelValue = value => {
-    if (dataExtraLocal.value.length) {
-      return !!find(dataExtraLocal.value, [AKeyId, value]);
-    }
-    return isString(value) || isNumber(value);
-  };
-
-  const modelArrayWithoutDataExtra = computed(() => {
-    let model = [];
-    if (isArray(modelValue.value) && modelValue.value.length) {
-      model = filter(modelValue.value, currentModel => isValidModelValue(currentModel));
-    } else if (isValidModelValue(modelValue.value)) {
-      model = [modelValue.value];
-    }
-    return model;
-  });
-
-  const changeDataFromServerWithModel = ({ response }) => {
-    const DATA_FROM_SERVER_ALT = cloneDeep(dataFromServer.value);
-    const DATA_FROM_SERVER_NEW = [];
-    const MODEL_ARRAY = cloneDeep(modelArrayWithoutDataExtra.value);
-
-    forEach(DATA_FROM_SERVER_ALT, itemAlt => {
-      if (MODEL_ARRAY.length === 0) {
-        return false;
-      }
-      const ID = isDataSimpleArray.value ? itemAlt : get(itemAlt, keyId.value);
-      const INDEX_IN_MODEL = MODEL_ARRAY.indexOf(ID);
-      if (INDEX_IN_MODEL !== -1) {
-        MODEL_ARRAY.splice(INDEX_IN_MODEL, 1);
-        DATA_FROM_SERVER_NEW.push(itemAlt);
-      }
-    });
-    DATA_FROM_SERVER_NEW.push(...response);
-    dataFromServer.value = uniqueList(DATA_FROM_SERVER_NEW);
-  };
-
-  const onSearchInApi = ({ search, data = [] }) => {
-    if (!searchApiLocal.value) {
-      return;
-    }
-    loadingSearchApi.value = true;
-    getListHttp({
-      url: url.value,
-      urlParams: {
-        ...(urlParams.value || {}),
-        [searchApiKey.value]: search,
-      },
-    }).then(
-      response => {
-        if (isDataSimpleArray.value) {
-          response = map(response, item => item[keyLabel.value]);
-        }
-        changeDataFromServerWithModel({ response, data });
-      },
-    ).then(
-      () => {
-        loadingSearchApi.value = false;
-      }
-    );
-  };
-
-  const loadDataFromServerForSearchAPI = () => {
-    if (!searchApiLocal.value ||
-      !modelArrayWithoutDataExtra.value.length) {
-      return;
-    }
-    loadingDataFromServer.value = true;
-    const URL_PARAMS = {
-      ...urlParams.value,
-      ...{
-        [keyId.value]: modelArrayWithoutDataExtra.value,
-        limit: modelArrayWithoutDataExtra.value.length,
-      },
-    };
-    return getListHttp({
-      url: url.value,
-      urlParams: URL_PARAMS,
-    }).then(
-      response => {
-        dataFromServer.value = response || [];
-      }
-    ).finally(() => {
-      loadingDataFromServer.value = false;
-    });
-  };
-
-  return {
-    loadDataFromServer,
-    loadDataFromServerForSearchAPI,
-    loadingDataFromServer,
-    loadingSearchApi,
-    onSearchInApi,
-    searchApiLocal,
-    updateUrlPropsComputed,
-    urlPropsComputed,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import AHttpAPI from "../../compositionAPI/AHttpAPI";
+
+import AKeyId from "../../const/AKeyId";
+import {
+  cloneDeep,
+  filter,
+  find,
+  forEach,
+  get,
+  isArray,
+  isMatch,
+  isNil,
+  isNumber,
+  isString,
+  map,
+  uniq,
+  uniqBy,
+} from "lodash-es";
+
+export default function UiDataFromServerAPI(props, {
+  changeModel = () => {},
+  dataExtraLocal = computed(() => []),
+  dataFromServer = ref([])
+} = {}) {
+  const apiSaveId = toRef(props, "apiSaveId");
+  const isDataSimpleArray = toRef(props, "isDataSimpleArray");
+  const keyId = toRef(props, "keyId");
+  const keyLabel = toRef(props, "keyLabel");
+  const searchApi = toRef(props, "searchApi");
+  const modelValue = toRef(props, "modelValue");
+  const searchApiKey = toRef(props, "searchApiKey");
+  const type = toRef(props, "type");
+  const url = toRef(props, "url");
+  const urlParams = toRef(props, "urlParams");
+
+  const loadingSearchApi = ref(false);
+  const loadingDataFromServer = ref(undefined);
+
+  const {
+    getListHttp,
+  } = AHttpAPI();
+
+  const searchApiLocal = computed(() => {
+    return !!(searchApi.value && searchApiKey.value && url.value);
+  });
+
+  const urlPropsComputed = computed(() => {
+    return [
+      apiSaveId,
+      url,
+      urlParams,
+    ];
+  });
+
+  const loadDataFromServer = () => {
+    if (!url.value || searchApiLocal.value) {
+      dataFromServer.value = [];
+      return;
+    }
+    loadingDataFromServer.value = true;
+    getListHttp({
+      url: url.value,
+      urlParams: urlParams.value,
+      apiSaveId: apiSaveId.value,
+    }).then(
+      response => {
+        dataFromServer.value = response;
+      }
+    ).finally(
+      () => {
+        loadingDataFromServer.value = false;
+      }
+    );
+  };
+
+  const isTypeList = computed(() => {
+    return type.value === "checkbox" || type.value === "multiselect";
+  });
+
+  const updateUrlPropsComputed = (newVal, oldVal) => {
+    if (!isNil(oldVal) && !isMatch(oldVal, newVal)) {
+      loadDataFromServer();
+      if (isTypeList.value) {
+        changeModel({
+          model: [],
+          currentModel: [],
+        });
+      } else {
+        changeModel({
+          model: undefined,
+          currentModel: undefined,
+        });
+      }
+    }
+  };
+
+  const uniqueList = list => {
+    if (isDataSimpleArray.value) {
+      return uniq(list);
+    }
+    return uniqBy(list, keyId.value);
+  };
+
+  const isValidModelValue = value => {
+    if (dataExtraLocal.value.length) {
+      return !find(dataExtraLocal.value, [AKeyId, value]);
+    }
+    return isString(value) || isNumber(value);
+  };
+
+  const modelArrayWithoutDataExtra = computed(() => {
+    let model = [];
+    if (isArray(modelValue.value) && modelValue.value.length) {
+      model = filter(modelValue.value, currentModel => isValidModelValue(currentModel));
+    } else if (isValidModelValue(modelValue.value)) {
+      model = [modelValue.value];
+    }
+    return model;
+  });
+
+  const changeDataFromServerWithModel = ({ response }) => {
+    const DATA_FROM_SERVER_ALT = cloneDeep(dataFromServer.value);
+    const DATA_FROM_SERVER_NEW = [];
+    const MODEL_ARRAY = cloneDeep(modelArrayWithoutDataExtra.value);
+
+    forEach(DATA_FROM_SERVER_ALT, itemAlt => {
+      if (MODEL_ARRAY.length === 0) {
+        return false;
+      }
+      const ID = isDataSimpleArray.value ? itemAlt : get(itemAlt, keyId.value);
+      const INDEX_IN_MODEL = MODEL_ARRAY.indexOf(ID);
+      if (INDEX_IN_MODEL !== -1) {
+        MODEL_ARRAY.splice(INDEX_IN_MODEL, 1);
+        DATA_FROM_SERVER_NEW.push(itemAlt);
+      }
+    });
+    DATA_FROM_SERVER_NEW.push(...response);
+    dataFromServer.value = uniqueList(DATA_FROM_SERVER_NEW);
+  };
+
+  const onSearchInApi = ({ search, data = [] }) => {
+    if (!searchApiLocal.value) {
+      return;
+    }
+    loadingSearchApi.value = true;
+    getListHttp({
+      url: url.value,
+      urlParams: {
+        ...(urlParams.value || {}),
+        [searchApiKey.value]: search,
+      },
+    }).then(
+      response => {
+        if (isDataSimpleArray.value) {
+          response = map(response, item => item[keyLabel.value]);
+        }
+        changeDataFromServerWithModel({ response, data });
+      },
+    ).then(
+      () => {
+        loadingSearchApi.value = false;
+      }
+    );
+  };
+
+  const loadDataFromServerForSearchAPI = () => {
+    if (!searchApiLocal.value ||
+      !modelArrayWithoutDataExtra.value.length) {
+      return;
+    }
+    let MODEL_ARRAY;
+    if (keyId.value === "pk") {
+      MODEL_ARRAY = filter(modelArrayWithoutDataExtra.value, value => !isNil(value));
+    } else {
+      MODEL_ARRAY = cloneDeep(modelArrayWithoutDataExtra.value);
+    }
+    if (!MODEL_ARRAY.length) {
+      return;
+    }
+    loadingDataFromServer.value = true;
+    const URL_PARAMS = {
+      ...urlParams.value,
+      ...{
+        [keyId.value]: MODEL_ARRAY,
+        limit: MODEL_ARRAY.length,
+      },
+    };
+    return getListHttp({
+      url: url.value,
+      urlParams: URL_PARAMS,
+    }).then(
+      response => {
+        dataFromServer.value = response || [];
+      }
+    ).finally(() => {
+      loadingDataFromServer.value = false;
+    });
+  };
+
+  return {
+    loadDataFromServer,
+    loadDataFromServerForSearchAPI,
+    loadingDataFromServer,
+    loadingSearchApi,
+    onSearchInApi,
+    searchApiLocal,
+    updateUrlPropsComputed,
+    urlPropsComputed,
+  };
+}