aloha-vue 1.2.6 → 1.2.8

package/docs/src/main.js

@@ -2,6 +2,7 @@ import App from "./App/App.vue";
 import { createApp } from "vue";
 import router from "./router/index";
 // import AGroupButtonDropdownPlugin from "../../src/plugins/AGroupButtonDropdownPlugin";
+import AFiltersPlugin from "../../src/plugins/AFiltersPlugin";
 import {
   AIconPlugin,
   AI18nPlugin,
@@ -9,7 +10,6 @@ import {
   AModalPlugin,
   ASafeHtml,
   ASelectPlugin,
-  ATablePlugin,
 } from "../../dist";
 import mainIcons from "./mainIcons";
 
@@ -37,9 +37,25 @@ APP.use(ASelectPlugin, {
     menuWidthType: "by_content",
   },
 });
-APP.use(ATablePlugin, {
+APP.use(AFiltersPlugin, {
   config: {
-
+    headerBottomGroups: [
+      {
+        props: {},
+        children: [
+          {
+            component: "addFilterSelect",
+            props: {
+              keyGroup: "group",
+            },
+          },
+          {
+            component: "buttonSearch",
+            props: {},
+          },
+        ],
+      },
+    ],
   },
 });
 // APP.use(AGroupButtonDropdownPlugin, {

package/package.json

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

package/src/AFilters/AFiltersHorizontal/AFiltersHorizontal.js

@@ -137,13 +137,13 @@ export default {
       filtersTopFooter,
       filtersTopHeader,
     } = FiltersLayoutAPI({
-      filterMainComponent,
+      addFilterSelectComponent,
+      buttonDeleteFiltersSavedComponent,
+      buttonSaveTopComponent,
       buttonSearchComponent,
       buttonToggleComponent,
+      filterMainComponent,
       selectFiltersSavedComponent,
-      buttonDeleteFiltersSavedComponent,
-      buttonSaveTopComponent,
-      addFilterSelectComponent,
     });
 
     initEventBus();

package/src/AFilters/AFiltersHorizontal/compositionAPI/FilterMainAPI.js

@@ -6,6 +6,10 @@ import {
 
 import AFiltersHorizontalFilterUi from "../AFiltersHorizontalFilterUi/AFiltersHorizontalFilterUi";
 
+import {
+  filtersPluginComponentsProps,
+} from "../../../plugins/AFiltersPlugin";
+
 export default function FilterMainAPI(props) {
   const filtersGroup = toRef(props, "filtersGroup");
   const id = toRef(props, "id");
@@ -23,6 +27,7 @@ export default function FilterMainAPI(props) {
       unappliedModel: unappliedModel.value,
       onUpdateModelFilters: onUpdateModelFilters.value,
       updateDataKeyByIdFromFilter: updateDataKeyByIdFromFilter.value,
+      ...filtersPluginComponentsProps.value.filterMain || {},
     });
   });
 

package/src/AFilters/AFiltersHorizontal/compositionAPI/FiltersHiddenAPI.js

@@ -5,6 +5,10 @@ import {
 
 import ASelect from "../../../ui/ASelect/ASelect";
 
+import {
+  filtersPluginComponentsProps,
+} from "../../../plugins/AFiltersPlugin";
+
 import {
   filter,
   forEach,
@@ -59,6 +63,7 @@ export default function FiltersHiddenAPI(props, { emit }) {
       disabled: !filtersHidden.value.length,
       search: true,
       change: addFiltersVisible,
+      ...filtersPluginComponentsProps.value.addFilterSelect || {},
     });
   });
 

package/src/AFilters/AFiltersHorizontal/compositionAPI/FiltersLayoutAPI.js

@@ -4,36 +4,36 @@ import {
 } from "vue";
 
 import {
-  tablePluginOptions,
-} from "../../../plugins/ATablePlugin";
+  filtersPluginOptions,
+} from "../../../plugins/AFiltersPlugin";
 
 import {
   map,
 } from "lodash-es";
 
 export default function FiltersLayoutAPI({
-  filterMainComponent,
+  addFilterSelectComponent,
+  buttonDeleteFiltersSavedComponent,
+  buttonSaveTopComponent,
   buttonSearchComponent,
   buttonToggleComponent,
+  filterMainComponent,
   selectFiltersSavedComponent,
-  buttonDeleteFiltersSavedComponent,
-  buttonSaveTopComponent,
-  addFilterSelectComponent,
 }) {
   const availableElements = {
-    filterMainComponent,
+    addFilterSelectComponent,
+    buttonDeleteFiltersSavedComponent,
+    buttonSaveTopComponent,
     buttonSearchComponent,
     buttonToggleComponent,
+    filterMainComponent,
     selectFiltersSavedComponent,
-    buttonDeleteFiltersSavedComponent,
-    buttonSaveTopComponent,
-    addFilterSelectComponent,
   };
 
   const filtersTopHeader = computed(() => {
     return h("div", {
       class: "a_table__filters_top__header",
-    }, map(tablePluginOptions.value.config.headerTopGroups, group => {
+    }, map(filtersPluginOptions.value.config.headerTopGroups, group => {
       return h("div", {
         class: "a_table__filters_top__header__group",
         ...group.props,
@@ -45,7 +45,7 @@ export default function FiltersLayoutAPI({
   const filtersTopFooter = computed(() => {
     return h("div", {
       class: "a_table__filters_top__footer",
-    }, map(tablePluginOptions.value.config.headerBottomGroups, group => {
+    }, map(filtersPluginOptions.value.config.headerBottomGroups, group => {
       return h("div", {
         class: "a_table__filters_top__footer__group",
         ...group.props,

package/src/AFilters/AFiltersHorizontal/compositionAPI/FiltersSaveAPI.js

@@ -9,8 +9,8 @@ import AButton from "../../../AButton/AButton";
 import ASelect from "../../../ui/ASelect/ASelect";
 
 import {
-  tablePluginComponentsProps,
-} from "../../../plugins/ATablePlugin";
+  filtersPluginComponentsProps,
+} from "../../../plugins/AFiltersPlugin";
 
 export default function FiltersSaveAPI(props, {
   onOpen = () => ({}),
@@ -66,7 +66,7 @@ export default function FiltersSaveAPI(props, {
       id: buttonSaveComponentTopId.value,
       onClick: openModalSaveTop,
       ...buttonSaveComponentPropsDefault.value,
-      ...tablePluginComponentsProps.value.buttonSaveTop,
+      ...filtersPluginComponentsProps.value.buttonSaveTop || {},
     });
   });
 
@@ -113,7 +113,7 @@ export default function FiltersSaveAPI(props, {
       search: true,
       deselect: true,
       change: changeModelFiltersSaved,
-      ...tablePluginComponentsProps.value.selectFiltersSaved,
+      ...filtersPluginComponentsProps.value.selectFiltersSaved || {},
     });
   });
 

package/src/AFilters/AFiltersHorizontal/compositionAPI/FiltersSavedDeleteAPI.js

@@ -11,8 +11,8 @@ import AConfirmAPI from "../../../compositionAPI/AConfirmAPI";
 import ANotificationAPI from "../../../compositionAPI/ANotificationAPI";
 
 import {
-  tablePluginComponentsProps,
-} from "../../../plugins/ATablePlugin";
+  filtersPluginComponentsProps,
+} from "../../../plugins/AFiltersPlugin";
 
 export default function FiltersSavedDeleteAPI(props, {
   changeModelFiltersSaved = () => {},
@@ -107,7 +107,7 @@ export default function FiltersSavedDeleteAPI(props, {
       },
       ariaDisabled: disabledButtonDeleteFiltersSaved.value,
       onClick: openDeleteConfirm,
-      ...tablePluginComponentsProps.value.buttonDeleteFiltersSaved,
+      ...filtersPluginComponentsProps.value.buttonDeleteFiltersSaved || {},
     });
   });
 

package/src/AFilters/AFiltersHorizontal/compositionAPI/SearchAPI.js

@@ -7,8 +7,8 @@ import {
 import AButton from "../../../AButton/AButton";
 
 import {
-  tablePluginComponentsProps,
-} from "../../../plugins/ATablePlugin";
+  filtersPluginComponentsProps,
+} from "../../../plugins/AFiltersPlugin";
 
 export default function SearchAPI(props, { emit }, {
   onClose = () => {},
@@ -39,7 +39,7 @@ export default function SearchAPI(props, { emit }, {
       stop: true,
       disabled: disabled.value,
       onClick: onSearch,
-      ...tablePluginComponentsProps.value.buttonSearch,
+      ...filtersPluginComponentsProps.value.buttonSearch || {},
     });
   });
 

package/src/AFilters/AFiltersHorizontal/compositionAPI/ToggleAPI.js

@@ -8,8 +8,8 @@ import {
 import AButton from "../../../AButton/AButton";
 
 import {
-  tablePluginComponentsProps,
-} from "../../../plugins/ATablePlugin";
+  filtersPluginComponentsProps,
+} from "../../../plugins/AFiltersPlugin";
 
 export default function ToggleAPI(props) {
   const filtersGroup = toRef(props, "filtersGroup");
@@ -55,7 +55,7 @@ export default function ToggleAPI(props) {
       text: textToggle,
       iconRight: iconToggle,
       onClick: onToggle,
-      ...tablePluginComponentsProps.value.buttonToggle,
+      ...filtersPluginComponentsProps.value.buttonToggle || {},
     });
   });
 

package/src/plugins/AFiltersPlugin.js

@@ -0,0 +1,99 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import {
+  forEach,
+} from "lodash-es";
+
+export const filtersPluginOptions = ref({
+  propsDefault: {
+
+  },
+  config: {
+    isHtmlTitleSort: false,
+    headerTopGroups: [
+      {
+        props: {},
+        children: [
+          {
+            component: "filterMain",
+            props: {},
+          },
+          {
+            component: "buttonSearch",
+            props: {},
+          },
+          {
+            component: "buttonToggle",
+            props: {},
+          },
+        ],
+      },
+      {
+        props: {},
+        children: [
+          {
+            component: "selectFiltersSaved",
+            props: {},
+          },
+          {
+            component: "buttonSaveTop",
+            props: {},
+          },
+          {
+            component: "buttonDeleteFiltersSaved",
+            props: {},
+          },
+        ],
+      },
+    ],
+    headerBottomGroups: [
+      {
+        props: {},
+        children: [
+          {
+            component: "addFilterSelect",
+            props: {},
+          },
+          {
+            component: "buttonSearch",
+            props: {},
+          },
+        ],
+      },
+    ],
+  },
+});
+
+export const filtersPluginComponentsProps = computed(() => {
+  const propsByKey = {};
+  forEach(filtersPluginOptions.value.config.headerTopGroups, group => {
+    forEach(group.children, child => {
+      propsByKey[child.component] = child.props;
+    });
+  });
+  forEach(filtersPluginOptions.value.config.headerBottomGroups, group => {
+    forEach(group.children, child => {
+      propsByKey[child.component] = child.props;
+    });
+  });
+  return propsByKey;
+});
+
+export default {
+  install: (app, {
+    propsDefault = {},
+    config = {},
+  } = {}) => {
+    filtersPluginOptions.value.propsDefault = {
+      ...filtersPluginOptions.value.propsDefault,
+      ...propsDefault,
+    };
+    filtersPluginOptions.value.config = {
+      ...filtersPluginOptions.value.config,
+      ...config,
+    };
+  },
+};

package/src/plugins/ATablePlugin.js

@@ -1,83 +1,16 @@
 import {
-  computed,
   ref,
 } from "vue";
 
-import {
-  forEach,
-} from "lodash-es";
-
 export const tablePluginOptions = ref({
   propsDefault: {
 
   },
   config: {
     isHtmlTitleSort: false,
-    headerTopGroups: [
-      {
-        props: {},
-        children: [
-          {
-            component: "filterMain",
-            props: {},
-          },
-          {
-            component: "buttonSearch",
-            props: {},
-          },
-          {
-            component: "buttonToggle",
-            props: {},
-          },
-        ],
-      },
-      {
-        props: {},
-        children: [
-          {
-            component: "selectFiltersSaved",
-            props: {},
-          },
-          {
-            component: "buttonSaveTop",
-            props: {},
-          },
-          {
-            component: "buttonDeleteFiltersSaved",
-            props: {},
-          },
-        ],
-      },
-    ],
-    headerBottomGroups: [
-      {
-        props: {},
-        children: [
-          {
-            component: "addFilterSelect",
-            props: {},
-          },
-          {
-            component: "buttonSearch",
-            props: {},
-          },
-        ],
-      },
-    ],
   },
 });
 
-export const tablePluginComponentsProps = computed(() => {
-  const propsByKey = {};
-  forEach(tablePluginOptions.value.config.headerTopGroups, group => {
-    forEach(group.children, child => {
-      propsByKey[child.component] = child.props;
-    });
-  });
-
-  return propsByKey;
-});
-
 export default {
   install: (app, {
     propsDefault = {},