aloha-vue 1.2.42 → 1.2.44

package/docs/src/components/TheMenu/TheMenu.js

@@ -129,6 +129,14 @@ export default {
           },
           icon: "FilterCircleFill",
         },
+        {
+          id: "filtersRight",
+          label: "filtersRight",
+          to: {
+            name: "PageFiltersRight",
+          },
+          icon: "FilterCircleFill",
+        },
         {
           id: "dropdown",
           label: "Dropdown",

package/docs/src/mainTranslation.js

@@ -40,6 +40,7 @@ import PageModalWizardI18n from "./views/PageModalWizard/i18n/PageModalWizardI18
 import PageWizardI18n from "./views/PageWizard/i18n/PageWizardI18n";
 import PageModalI18n from "./views/PageModal/i18n/PageModalI18n";
 import PageTablePreviewDownI18n from "./views/PageTable/PageTablePreviewDown/i18n/PageTablePreviewDownI18n";
+import PageFiltersRightI18n from "./views/PageFiltersRight/i18n/PageFiltersRightI18n";
 
 export const mainTranslation = {
   ar: {
@@ -76,6 +77,7 @@ export const mainTranslation = {
     ...PageWizardI18n.ar,
     ...PageModalI18n.ar,
     ...PageTablePreviewDownI18n.ar,
+    ...PageFiltersRightI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -111,6 +113,7 @@ export const mainTranslation = {
     ...PageWizardI18n.de,
     ...PageModalI18n.de,
     ...PageTablePreviewDownI18n.de,
+    ...PageFiltersRightI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -146,6 +149,7 @@ export const mainTranslation = {
     ...PageWizardI18n.en,
     ...PageModalI18n.en,
     ...PageTablePreviewDownI18n.en,
+    ...PageFiltersRightI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -181,6 +185,7 @@ export const mainTranslation = {
     ...PageWizardI18n.es,
     ...PageModalI18n.es,
     ...PageTablePreviewDownI18n.es,
+    ...PageFiltersRightI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -216,6 +221,7 @@ export const mainTranslation = {
     ...PageWizardI18n.fr,
     ...PageModalI18n.fr,
     ...PageTablePreviewDownI18n.fr,
+    ...PageFiltersRightI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -251,6 +257,7 @@ export const mainTranslation = {
     ...PageWizardI18n.hr,
     ...PageModalI18n.hr,
     ...PageTablePreviewDownI18n.hr,
+    ...PageFiltersRightI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -286,6 +293,7 @@ export const mainTranslation = {
     ...PageWizardI18n.it,
     ...PageModalI18n.it,
     ...PageTablePreviewDownI18n.it,
+    ...PageFiltersRightI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -321,5 +329,6 @@ export const mainTranslation = {
     ...PageWizardI18n.ru,
     ...PageModalI18n.ru,
     ...PageTablePreviewDownI18n.ru,
+    ...PageFiltersRightI18n.ru,
   },
 };

package/docs/src/router/index.js

@@ -259,6 +259,11 @@ const ROUTES = [
     name: "PageFilters",
     component: () => import(/* webpackChunkName: "PageFilters" */ "../views/PageFilters/PageFilters.vue"),
   },
+  {
+    path: "/filters-right",
+    name: "PageFiltersRight",
+    component: () => import(/* webpackChunkName: "PageFiltersRight" */ "../views/PageFiltersRight/PageFiltersRight.vue"),
+  },
   {
     path: "/modal-wizard",
     name: "PageModalWizard",

package/docs/src/views/PageFiltersRight/PageFiltersRight.js

@@ -0,0 +1,43 @@
+import AlohaPage from "../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import ATranslation from "../../../../src/ATranslation/ATranslation";
+import PageFiltersRightExample from "./PageFiltersRightExample/PageFiltersRightExample.vue";
+
+import EventsAPI from "./compositionAPI/EventsAPI";
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import SlotsAPI from "./compositionAPI/SlotsAPI";
+
+export default {
+  name: "PageFiltersRight",
+  components: {
+    AlohaPage,
+    AlohaTableProps,
+    ATranslation,
+    PageFiltersRightExample,
+  },
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataSlots,
+    } = SlotsAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    return {
+      dataEvents,
+      dataProps,
+      dataSlots,
+      pageTitle,
+    };
+  },
+};

package/docs/src/views/PageFiltersRight/PageFiltersRight.pug

@@ -0,0 +1,28 @@
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
+  )
+    a-translation(
+      tag="p"
+      html="_A_FILTERS_RIGHT_COMPONENT_DESCRIPTION_"
+    )
+
+    page-filters-right-example
+
+    //aloha-table-props(
+    //  :data="dataProps"
+    //)
+    //
+    //aloha-table-props(
+    //  table-label="Slots"
+    //  :data="dataSlots"
+    //  :columns="['name', 'description']"
+    //)
+    //
+    //aloha-table-props(
+    //  table-label="Events"
+    //  :data="dataEvents"
+    //  :columns="['name', 'type', 'description']"
+    //)

package/docs/src/views/PageFiltersRight/PageFiltersRight.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageFiltersRight.pug"></template>
+<script src="./PageFiltersRight.js"></script>

package/docs/src/views/PageFiltersRight/PageFiltersRightExample/PageFiltersRightExample.js

@@ -0,0 +1,58 @@
+import {
+  ref,
+} from "vue";
+
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import AFilters from "../../../../../src/AFilters/AFilters/AFilters";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageFiltersRightExample",
+  components: {
+    AlohaExample,
+    AFilters,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const filters = [
+      {
+        type: "text",
+        id: "search",
+        label: "_A_PAGE_FILTER_SEARCH_",
+        main: true,
+      },
+      {
+        type: "text",
+        id: "aloha",
+        label: "_A_PAGE_FILTER_TEXT_",
+        alwaysVisible: true,
+      },
+      {
+        type: "date",
+        id: "date",
+        label: "_A_PAGE_FILTER_DATE_",
+        alwaysVisible: true,
+      },
+    ];
+
+    const appliedModel = ref({});
+    const unappliedModel = ref({});
+
+    return {
+      appliedModel,
+      codeHtml,
+      codeJs,
+      filters,
+      unappliedModel,
+    };
+  },
+};

package/docs/src/views/PageFiltersRight/PageFiltersRightExample/PageFiltersRightExample.pug

@@ -0,0 +1,14 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_PAGE_FILTERS_HEADER_"
+  description="_A_PAGE_FILTERS_DESCRIPTION_"
+  :props="['view']"
+)
+  div
+    a-filters(
+      :filters="filters"
+      view="right"
+      v-model:applied-model="appliedModel"
+      v-model:unapplied-model="unappliedModel"
+    )

package/docs/src/views/PageFiltersRight/PageFiltersRightExample/PageFiltersRightExample.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageFiltersRightExample.pug"></template>
+<script src="./PageFiltersRightExample.js"></script>

package/docs/src/views/PageFiltersRight/PageFiltersRightExample/compositionAPI/HtmlAPI.js

@@ -0,0 +1,12 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-filters
+  :filters="filters"
+  v-model:applied-model="appliedModel"
+  v-model:unapplied-model="unappliedModel"
+>
+</a-filters>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageFiltersRight/PageFiltersRightExample/compositionAPI/JsAPI.js

@@ -0,0 +1,49 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AFilters from "aloha-vue/src/AFilters/AFilters";
+    
+export default {
+  name: "PageFiltersExample",
+  components: {
+    AFilters,
+  },
+  setup() {
+    const filters = [
+      {
+        type: "text",
+        id: "search",
+        label: "_A_PAGE_FILTER_SEARCH_",
+        main: true,
+      },
+      {
+        type: "text",
+        id: "aloha",
+        label: "_A_PAGE_FILTER_TEXT_",
+        alwaysVisible: true,
+      },
+      {
+        type: "date",
+        id: "date",
+        label: "_A_PAGE_FILTER_DATE_",
+        alwaysVisible: true,
+      },
+    ];
+
+    const appliedModel = ref({});
+    const unappliedModel = ref({});
+    
+    return {
+      appliedModel,
+      filters,
+      unappliedModel,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageFiltersRight/compositionAPI/EventsAPI.js

@@ -0,0 +1,13 @@
+export default function EventsAPI() {
+  const dataEvents = [
+    {
+      name: "close",
+      description: "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_",
+      type: "Function",
+    },
+  ];
+
+  return {
+    dataEvents,
+  };
+}

package/docs/src/views/PageFiltersRight/compositionAPI/ExposesAPI.js

@@ -0,0 +1,18 @@
+export default function ExposesAPI() {
+  const dataExposes = [
+    {
+      name: "close",
+      description: "_A_ALERT_EXPOSES_CLOSE_DESCRIPTION_",
+      type: "Function",
+    },
+    {
+      name: "isHidden",
+      description: "_A_ALERT_EXPOSES_IS_HIDDEN_DESCRIPTION_",
+      type: "Boolean",
+    },
+  ];
+
+  return {
+    dataExposes,
+  };
+}

package/docs/src/views/PageFiltersRight/compositionAPI/PageTitleAPI.js

@@ -0,0 +1,24 @@
+import {
+  computed,
+} from "vue";
+
+import {
+  getTranslatedText,
+} from "../../../../../src/ATranslation/compositionAPI/UtilsAPI";
+
+
+export default function PageTitleAPI() {
+  const componentNameTranslated = computed(() => {
+    return getTranslatedText({
+      placeholder: "_A_FILTERS_RIGHT_COMPONENT_NAME_",
+    });
+  });
+
+  const pageTitle = computed(() => {
+    return `AFilters${ componentNameTranslated.value ? ` (${ componentNameTranslated.value })` : "" }`;
+  });
+
+  return {
+    pageTitle,
+  };
+}

package/docs/src/views/PageFiltersRight/compositionAPI/PropsAPI.js

@@ -0,0 +1,106 @@
+export default function PropsAPI() {
+  const dataProps = [
+    {
+      name: "alert-class",
+      description: "_A_ALERT_PROPS_ALERT_CLASS_DESCRIPTION_",
+      type: "String / Object",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "alert-content-class",
+      description: "_A_ALERT_PROPS_ALERT_CONTENT_CLASS_DESCRIPTION_",
+      type: "String / Object",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "btn-close-attributes",
+      description: "_A_ALERT_PROPS_BTN_CLOSE_ATTRIBUTES_DESCRIPTION_",
+      type: "Object",
+      default: "{}",
+      required: false,
+    },
+    {
+      name: "closable",
+      description: "_A_ALERT_PROPS_CLOSABLE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "show-icon",
+      description: "_A_ALERT_PROPS_HAS_ICON_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "html",
+      description: "_A_ALERT_PROPS_HTML_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "icon",
+      description: "_A_ALERT_PROPS_ICON_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "icon-class",
+      description: "_A_ALERT_PROPS_ICON_CLASS_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "is-visible",
+      description: "_A_ALERT_PROPS_IS_VISIBLE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "removeAlertOnClose",
+      description: "_A_ALERT_PROPS_REMOVE_ALERT_ON_CLOSE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "safe-html",
+      description: "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "text",
+      description: "_A_ALERT_PROPS_TEXT_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "text-close",
+      description: "_A_ALERT_PROPS_TEXT_CLOSE_DESCRIPTION_",
+      type: "String",
+      default: "_ALERT_CLOSE_",
+      required: false,
+    },
+    {
+      name: "type",
+      description: "_A_ALERT_PROPS_TYPE_DESCRIPTION_",
+      type: "String",
+      default: "danger",
+      required: false,
+    },
+  ];
+
+  return {
+    dataProps,
+  };
+}

package/docs/src/views/PageFiltersRight/compositionAPI/SlotsAPI.js

@@ -0,0 +1,12 @@
+export default function SlotsAPI() {
+  const dataSlots = [
+    {
+      name: "default",
+      description: "_A_ALERT_SLOTS_DEFAULT_DESCRIPTION_",
+    },
+  ];
+
+  return {
+    dataSlots,
+  };
+}

package/docs/src/views/PageFiltersRight/i18n/PageFiltersRightI18n.js

@@ -0,0 +1,19 @@
+import ar from "./ar.json";
+import de from "./de.json";
+import en from "./en.json";
+import es from "./es.json";
+import fr from "./fr.json";
+import hr from "./hr.json";
+import it from "./it.json";
+import ru from "./ru.json";
+
+export default {
+  ar,
+  de,
+  en,
+  es,
+  fr,
+  hr,
+  it,
+  ru,
+};

package/docs/src/views/PageFiltersRight/i18n/ar.json

@@ -0,0 +1,3 @@
+{
+
+}

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

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageFiltersRight/i18n/en.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageFiltersRight/i18n/es.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageFiltersRight/i18n/fr.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageFiltersRight/i18n/hr.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageFiltersRight/i18n/it.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageFiltersRight/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+
+}

package/package.json

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

package/src/AFilters/AFilersRight/AFilersRight.js

@@ -0,0 +1,74 @@
+import {
+  h,
+} from "vue";
+
+import AFiltersHorizontalFilterUi from "../AFiltersHorizontal/AFiltersHorizontalFilterUi/AFiltersHorizontalFilterUi";
+
+import IdAPI from "./compositionAPI/IdAPI";
+
+export default {
+  name: "AFilersRight",
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    filters: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    filtersKeyById: {
+      type: Object,
+      required: true,
+    },
+    appliedModel: {
+      type: Object,
+      required: true,
+    },
+    onUpdateModelFilters: {
+      type: Function,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    updateDataKeyByIdFromFilter: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: [
+    "startSearch",
+  ],
+  setup(props) {
+    const {
+      idFilterRight,
+    } = IdAPI(props);
+
+    return {
+      idFilterRight,
+    };
+  },
+  render() {
+    return h("div", {
+      id: this.idFilterRight,
+      class: "a_filters_right",
+    }, [
+      h("form", {}, [
+        this.filters.map(filter => {
+          return h(AFiltersHorizontalFilterUi, {
+            class: "a_filters_right__filter_ui",
+            filter,
+            isLabelVisible: true,
+            unappliedModel: this.appliedModel,
+            updateDataKeyByIdFromFilter: this.updateDataKeyByIdFromFilter,
+            onUpdateModelFilters: this.onUpdateModelFilters,
+            id: this.id,
+          }, this.$slots);
+        })
+      ]),
+    ]);
+  },
+};

package/src/AFilters/AFilersRight/compositionAPI/IdAPI.js

@@ -0,0 +1,16 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function IdAPI(props) {
+  const id = toRef(props, "id");
+
+  const idFilterRight = computed(() => {
+    return `${ id.value }_filter_right`;
+  });
+
+  return {
+    idFilterRight,
+  };
+}

package/src/AFilters/AFilters/AFilters.js

@@ -1,11 +1,13 @@
 import {
   h,
+  Teleport,
   toRef,
   watch,
 } from "vue";
 
 import AFilterCenter from "../AFilterCenter/AFilterCenter";
 import AFiltersHorizontal from "../AFiltersHorizontal/AFiltersHorizontal";
+import AFilersRight from "../AFilersRight/AFilersRight";
 
 import CloseFilterAPI from "./compositionAPI/CloseFilterAPI";
 import DataKeyByKeyIdAPI from "./compositionAPI/DataKeyByKeyIdAPI";
@@ -59,6 +61,17 @@ export default {
       required: false,
       default: undefined,
     },
+    view: {
+      type: String,
+      required: false,
+      default: "top",
+      validator: value => ["top", "right"].indexOf(value) !== -1,
+    },
+    viewRightTeleportSelector: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   emits: [
     "startSearch",
@@ -78,6 +91,7 @@ export default {
       hasFilters,
       onUpdateModelFilters,
       setFiltersVisibleIds,
+      updateAppliedModel,
     } = FiltersAPI(props, context);
 
     const {
@@ -136,6 +150,7 @@ export default {
       toggleFiltersVisible,
       updateDataKeyByIdFromFilter,
       updateFiltersSavedLocal,
+      updateAppliedModel,
     };
   },
   render() {
@@ -145,7 +160,7 @@ export default {
     return h(
       "div",
       [
-        h(AFiltersHorizontal, {
+        this.view === "top" && h(AFiltersHorizontal, {
           id: this.id,
           canSave: this.canSave,
           disabled: this.disabled,
@@ -160,6 +175,21 @@ export default {
           onStartSearch: this.startSearch,
           onToggleFiltersVisible: this.toggleFiltersVisible,
         }, this.$slots),
+        this.view === "right" && h(Teleport, {
+          to: this.viewRightTeleportSelector,
+          disabled: !this.viewRightTeleportSelector,
+        }, [
+          h(AFilersRight, {
+            id: this.id,
+            disabled: this.disabled,
+            filters: this.filters,
+            filtersKeyById: this.filtersKeyById,
+            appliedModel: this.appliedModel,
+            onUpdateModelFilters: this.updateAppliedModel,
+            updateDataKeyByIdFromFilter: this.updateDataKeyByIdFromFilter,
+            onStartSearch: this.startSearch,
+          }, this.$slots),
+        ]),
         h(AFilterCenter, {
           id: this.id,
           appliedModel: this.appliedModel,

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

@@ -104,6 +104,10 @@ export default function FiltersAPI(props, { emit }) {
     }
   };
 
+  const updateAppliedModel = ({ model }) => {
+    emit("update:appliedModel", model);
+  };
+
   return {
     filtersDataKeyById,
     filtersGroup,
@@ -114,5 +118,6 @@ export default function FiltersAPI(props, { emit }) {
     hasFilters,
     onUpdateModelFilters,
     setFiltersVisibleIds,
+    updateAppliedModel,
   };
 }

package/src/ATable/ATable.js

@@ -831,6 +831,7 @@ export default {
         ]),
         (!this.isViewTableVisible && this.viewCurrent && this.$slots[this.viewCurrent.type]) &&
         this.$slots[this.viewCurrent.type]({
+          isLoading: this.isLoadingTable,
           rows: this.rowsLocalAll,
         }),
         (this.usePaginationLocal) &&

package/src/styles/components/ATable.scss

@@ -680,3 +680,9 @@
     top: .5rem;
   }
 }
+
+
+// Filters
+.a_filters_right__filter_ui {
+  margin-bottom: .5rem;
+}

package/src/ui/ARadio/ARadio.js

@@ -12,7 +12,7 @@ import AInput from "../AInput/AInput";
 import ARadioItem from "./ARadioItem/ARadioItem";
 import ATranslation from "../../ATranslation/ATranslation";
 
-import ChangeAPI from "../ACheckbox/compositionAPI/ChangeAPI";
+import ChangeAPI from "./compositionAPI/ChangeAPI";
 import TextAfterLabelAPI from "../ACheckbox/compositionAPI/TextAfterLabelAPI";
 import UiAPI from "../compositionApi/UiAPI";
 import UiCollapseAPI from "../compositionApi/UiCollapseAPI";
@@ -148,6 +148,11 @@ export default {
       required: false,
       default: true,
     },
+    isModelArray: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isRender: {
       type: Boolean,
       required: false,
@@ -216,7 +221,7 @@ export default {
       default: null,
     },
     modelValue: {
-      type: [String, Number, Boolean],
+      type: [String, Number, Boolean, Array],
       required: false,
     },
     options: {

package/src/ui/ARadio/compositionAPI/ChangeAPI.js

@@ -0,0 +1,58 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  forEach,
+} from "lodash-es";
+
+export default function ChangeAPI(props, {
+  changeModel = () => {},
+  dataKeyByKeyIdLocal = computed(() => ({})),
+}) {
+  const disabled = toRef(props, "disabled");
+  const isModelArray = toRef(props, "isModelArray");
+  const modelValue = toRef(props, "modelValue");
+
+  const onChangeModelValue = ({ model, $event }) => {
+    if (disabled.value) {
+      return;
+    }
+    if (isModelArray.value) {
+      if (!modelValue.value || modelValue.value.length === 0) {
+        setTimeout(() => {
+          changeModel({
+            model: [model],
+            $event,
+          });
+        });
+      } else {
+        setTimeout(() => {
+          const MODEL = [];
+          forEach(modelValue.value, modelItem => {
+            if (!dataKeyByKeyIdLocal.value[modelItem]) {
+              MODEL.push(modelItem);
+            }
+          });
+          MODEL.push(model);
+          changeModel({
+            model: MODEL,
+            $event,
+          });
+        });
+      }
+    } else {
+      setTimeout(() => {
+        changeModel({
+          model,
+          $event,
+        });
+      });
+    }
+  };
+
+  return {
+    onChangeModelValue,
+  };
+}