aloha-vue 1.0.200 → 1.0.202

package/docs/src/views/PageTabs/PageTabs.js

@@ -12,6 +12,7 @@ export default {
           label: "Tab 1",
           id: "tab_1",
           content: "CONTENT 1",
+          title: "ALoha sdfdsfds sdfsdfdsf",
         },
         {
           label: "Tab 2",

package/docs/src/views/PageTabs/PageTabs.pug

@@ -2,6 +2,7 @@ div
   h1 ATabs
   a-tabs(
     :data="dataTabs1"
+    :index-active-tab="1"
   )
   br
   a-tabs(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.200",
+  "version": "1.0.202",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/ATable/ATableFilterCenter/ATableFilterCenterItem.js

@@ -139,7 +139,9 @@ export default {
     const tableId = inject("tableId");
     const eventName = `eventATableFilterTopOnOpen_${ tableId.value }`;
     const goToFilter = () => {
-      EventBus.$emit(eventName);
+      if (!filter.value.main) {
+        EventBus.$emit(eventName);
+      }
 
       const FILTER_HTML_ID = getHtmlId({
         id: filter.value.id,

package/src/ATable/ATableFiltersTop/ATableFiltersTop.js

@@ -8,6 +8,8 @@ import AIcon from "../../AIcon/AIcon";
 import ATableFiltersTopFilter from "./ATableFiltersTopFilter";
 import ATableFiltersTopFilterUi from "./ATableFiltersTopFilterUi";
 
+import VisibleAPI from "./compositionAPI/VisibleAPI";
+
 import EventBus from "../../utils/EventBus";
 
 export default {
@@ -83,6 +85,10 @@ export default {
       $event.preventDefault();
     };
 
+    const {
+      isBtnToggleVisible,
+    } = VisibleAPI(props);
+
     initEventBus();
 
     onBeforeUnmount(() => {
@@ -91,6 +97,7 @@ export default {
 
     return {
       iconToggle,
+      isBtnToggleVisible,
       isOpen,
       onSearch,
       onToggle,
@@ -135,10 +142,9 @@ export default {
             }),
             !this.isOpen && BUTTON_SEARCH,
           ]),
-          h("div", {
+          this.isBtnToggleVisible && h("div", {
             class: "a_column",
           }, [
-
             h("button", {
               class: "a_btn a_btn_link a_text_nowrap",
               type: "button",

package/src/ATable/ATableFiltersTop/compositionAPI/VisibleAPI.js

@@ -0,0 +1,17 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function VisibleAPI(props) {
+  const filtersVisible = toRef(props, "filtersVisible");
+  const filtersGroup = toRef(props, "filtersGroup");
+
+  const isBtnToggleVisible = computed(() => {
+    return !!(filtersVisible.value.length || filtersGroup.value.alwaysVisible.length);
+  });
+
+  return {
+    isBtnToggleVisible,
+  };
+}

package/src/ATabs/ATabs.js

@@ -1,18 +1,14 @@
 import {
   h,
-  ref,
-  toRef,
-  watch,
 } from "vue";
 
-import ATabsContent from "./ATabsContent";
-import ATabsTab from "./ATabsTab";
+import ATabsContent from "./ATabsContent/ATabsContent";
+import ATabsTab from "./ATabsTab/ATabsTab";
 
+import ActiveAPI from "./compositionAPI/ActiveAPI";
+
+import placements from "../const/placements";
 import {
-  forEach,
-  get,
-  isNil,
-  isUndefined,
   uniqueId,
 } from "lodash-es";
 
@@ -28,16 +24,11 @@ export default {
       type: Array,
       required: true,
     },
-    idForActiveTab: {
-      type: [String, Number],
+    indexActiveTab: {
+      type: Number,
       required: false,
       default: undefined,
     },
-    keyId: {
-      type: String,
-      required: false,
-      default: "id",
-    },
     isChangeOutside: {
       type: Boolean,
       required: false,
@@ -46,56 +37,32 @@ export default {
       type: Boolean,
       required: false,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    titlePlacement: {
+      type: String,
+      required: false,
+      default: "top",
+      validator: placement => placements.indexOf(placement) !== -1,
+    },
   },
   emits: [
     "change",
   ],
-  setup(props, { emit }) {
-    const idForActiveTabLocal = ref(undefined);
-
-    const idForActiveTab = toRef(props, "idForActiveTab");
-    const data = toRef(props, "data");
-    const keyId = toRef(props, "keyId");
-    const initTabActiveId = () => {
-      if (!isNil(idForActiveTab.value)) {
-        idForActiveTabLocal.value = idForActiveTab.value;
-        return;
-      }
-
-      forEach(data.value, item => {
-        if (item.active) {
-          idForActiveTabLocal.value = item.id;
-          return false;
-        }
-      });
-      if (isUndefined(idForActiveTabLocal.value)) {
-        idForActiveTabLocal.value = get(data.value[0], keyId.value);
-      }
-    };
-
-    const isChangeOutside = toRef(props, "isChangeOutside");
-    const onChangeTab = ({ $event, tab }) => {
-      const TAB_ID = get(tab, keyId.value);
-      if (idForActiveTabLocal.value === TAB_ID) {
-        return;
-      }
-      if (!isChangeOutside.value) {
-        idForActiveTabLocal.value = TAB_ID;
-      }
-      emit("change", { $event, tab });
-    };
-
-    watch(idForActiveTab, () => {
-      if (idForActiveTab.value) {
-        idForActiveTabLocal.value = idForActiveTab.value;
-      }
-    });
+  setup(props, context) {
+    const {
+      changeTab,
+      indexActiveTabLocal,
+      initTabActiveIndex,
+    } = ActiveAPI(props, context);
 
-    initTabActiveId();
+    initTabActiveIndex();
 
     return {
-      idForActiveTabLocal,
-      onChangeTab,
+      indexActiveTabLocal,
+      changeTab,
     };
   },
   render() {
@@ -118,9 +85,10 @@ export default {
               tab,
               index: tabIndex,
               parentId: this.id,
-              idForActiveTab: this.idForActiveTabLocal,
-              keyId: this.keyId,
-              onChangeTab: this.onChangeTab,
+              indexActiveTabLocal: this.indexActiveTabLocal,
+              disabled: this.disabled,
+              titlePlacement: this.titlePlacement,
+              onChangeTab: this.changeTab,
             });
           }),
         ]),
@@ -134,8 +102,7 @@ export default {
             tab,
             index: tabIndex,
             parentId: this.id,
-            keyId: this.keyId,
-            idForActiveTab: this.idForActiveTabLocal,
+            indexActiveTabLocal: this.indexActiveTabLocal,
           }, this.$slots);
         }),
       ]),

package/src/ATabs/{ATabsContent.js → ATabsContent/ATabsContent.js}

@@ -3,9 +3,9 @@ import {
   withDirectives,
 } from "vue";
 
-import ASafeHtml from "../directives/ASafeHtml";
+import ASafeHtml from "../../directives/ASafeHtml";
 
-import ATabAPI from "./compositionAPI/ATabAPI";
+import ATabAPI from "../compositionAPI/ATabAPI";
 
 export default {
   name: "ATabsContent",
@@ -22,12 +22,8 @@ export default {
       type: Number,
       required: true,
     },
-    idForActiveTab: {
-      type: [String, Number],
-      required: true,
-    },
-    keyId: {
-      type: String,
+    indexActiveTabLocal: {
+      type: Number,
       required: true,
     },
   },

package/src/ATabs/ATabsTab/ATabsTab.js

@@ -0,0 +1,117 @@
+import {
+  h,
+  withDirectives,
+} from "vue";
+
+import ATooltip from "../../ATooltip/ATooltip";
+
+import ASafeHtml from "../../directives/ASafeHtml";
+
+import ATabAPI from "../compositionAPI/ATabAPI";
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import ChangeAPI from "./compositionAPI/ChangeAPI";
+import placements from "../../const/placements";
+
+export default {
+  name: "ATabsTab",
+  props: {
+    parentId: {
+      type: String,
+      required: true,
+    },
+    tab: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+    indexActiveTabLocal: {
+      type: Number,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    titlePlacement: {
+      type: String,
+      required: false,
+      default: "top",
+      validator: placement => placements.indexOf(placement) !== -1,
+    },
+  },
+  emits: [
+    "changeTab",
+  ],
+  setup(props, context) {
+    const {
+      idForContent,
+      idLocal,
+      isActive,
+    } = ATabAPI(props);
+
+    const {
+      isDisabled,
+      tabindexLocal,
+    } = AttributesAPI(props);
+
+    const {
+      changeTabLocal,
+      keydownTab,
+    } = ChangeAPI(props, context, {
+      isDisabled,
+    });
+
+    return {
+      changeTabLocal,
+      idForContent,
+      idLocal,
+      isActive,
+      isDisabled,
+      keydownTab,
+      tabindexLocal,
+    };
+  },
+  render() {
+    return h(ATooltip, {
+      tag: "li",
+      placement: this.titlePlacement,
+      isHide: !this.tab.title,
+      class: [
+        "a_tabs__list__item",
+        this.tab.classLi,
+      ],
+    }, {
+      default: () => [
+        h("a", {
+          id: this.idLocal,
+          class: ["a_tabs__list__link", this.tab.class, {
+            a_tabs__list__link_active: this.isActive,
+            a_tabs__list__link_disabled: this.isDisabled,
+          }],
+          role: "tab",
+          ariaDisabled: this.tab.disabled,
+          ariaControls: this.idForContent,
+          ariaSelected: this.isActive,
+          tabindex: this.tabindexLocal,
+          onClick: this.changeTabLocal,
+          onKeydown: this.keydownTab,
+        }, [
+          this.tab.title && h("span", {
+            class: "a_position_absolute_all",
+            title: this.tab.title,
+            ariaHidden: true,
+          }),
+          withDirectives(h("span"), [
+            [ASafeHtml, this.tab.label],
+          ]),
+        ]),
+      ],
+      title: () => withDirectives(h("div"), [
+        [ASafeHtml, this.tab.title],
+      ])
+    });
+  },
+};

package/src/ATabs/ATabsTab/compositionAPI/AttributesAPI.js

@@ -0,0 +1,22 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function AttributesAPI(props) {
+  const tab = toRef(props, "tab");
+  const disabled = toRef(props, "disabled");
+
+  const isDisabled = computed(() => {
+    return !!(disabled.value || tab.value.disabled);
+  });
+
+  const tabindexLocal = computed(() => {
+    return isDisabled.value ? -1 : 0;
+  });
+
+  return {
+    isDisabled,
+    tabindexLocal,
+  };
+}

package/src/ATabs/ATabsTab/compositionAPI/ChangeAPI.js

@@ -0,0 +1,33 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import AKeysCode from "../../../const/AKeysCode";
+
+export default function ChangeAPI(props, { emit }, {
+  isDisabled = computed(() => false),
+}) {
+  const tab = toRef(props, "tab");
+  const index = toRef(props, "index");
+  const changeTabLocal = $event => {
+    if (isDisabled.value) {
+      return;
+    }
+    emit("changeTab", { $event, tab: tab.value, tabIndex: index.value });
+  };
+
+  const keydownTab = $event => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      changeTabLocal($event);
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
+  return {
+    changeTabLocal,
+    keydownTab,
+  };
+}

package/src/ATabs/compositionAPI/ATabAPI.js

@@ -3,13 +3,15 @@ import {
   toRef,
 } from "vue";
 
-import {
-  get,
-} from "lodash-es";
-
 export default function ATabAPI(props) {
   const parentId = toRef(props, "parentId");
   const index = toRef(props, "index");
+  const indexActiveTabLocal = toRef(props, "indexActiveTabLocal");
+
+  const isActive = computed(() => {
+    return indexActiveTabLocal.value === index.value;
+  });
+
   const idLocal = computed(() => {
     return `${ parentId.value }_${ index.value }`;
   });
@@ -18,17 +20,6 @@ export default function ATabAPI(props) {
     return `${ idLocal.value }_content`;
   });
 
-  const tab = toRef(props, "tab");
-  const keyId = toRef(props, "keyId");
-  const tabId = computed(() => {
-    return get(tab.value, keyId.value);
-  });
-
-  const idForActiveTab = toRef(props, "idForActiveTab");
-  const isActive = computed(() => {
-    return idForActiveTab.value === tabId.value;
-  });
-
   return {
     idForContent,
     idLocal,

package/src/ATabs/compositionAPI/ActiveAPI.js

@@ -0,0 +1,59 @@
+import {
+  ref,
+  toRef,
+  watch,
+} from "vue";
+
+import {
+  forEach,
+  isNil,
+} from "lodash-es";
+
+export default function ActiveAPI(props, { emit }) {
+  const indexActiveTab = toRef(props, "indexActiveTab");
+  const data = toRef(props, "data");
+  const isChangeOutside = toRef(props, "isChangeOutside");
+
+  const indexActiveTabLocal = ref(0);
+
+  const setIndexActiveTabLocal = () => {
+    if (!isNil(indexActiveTab.value)) {
+      indexActiveTabLocal.value = indexActiveTab.value;
+    }
+  };
+
+  const initTabActiveIndex = () => {
+    setIndexActiveTabLocal();
+
+    if (!isNil(indexActiveTabLocal.value)) {
+      return;
+    }
+
+    forEach(data.value, (item, index) => {
+      if (item.active) {
+        indexActiveTabLocal.value = index;
+        return false;
+      }
+    });
+  };
+
+  const changeTab = ({ $event, tab, tabIndex }) => {
+    if (indexActiveTabLocal.value === tabIndex) {
+      return;
+    }
+    if (!isChangeOutside.value) {
+      indexActiveTabLocal.value = tabIndex;
+    }
+    emit("change", { $event, tab, tabIndex });
+  };
+
+  watch(indexActiveTab, () => {
+    setIndexActiveTabLocal();
+  });
+
+  return {
+    changeTab,
+    indexActiveTabLocal,
+    initTabActiveIndex,
+  };
+}

package/src/ATabs/ATabsTab.js

@@ -1,107 +0,0 @@
-import {
-  computed,
-  h,
-  toRef,
-  withDirectives,
-} from "vue";
-
-import ASafeHtml from "../directives/ASafeHtml";
-
-import ATabAPI from "./compositionAPI/ATabAPI";
-
-import AKeysCode from "../const/AKeysCode";
-
-export default {
-  name: "ATabsTab",
-  props: {
-    parentId: {
-      type: String,
-      required: true,
-    },
-    tab: {
-      type: Object,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-    idForActiveTab: {
-      type: [String, Number],
-      required: true,
-    },
-    keyId: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: [
-    "changeTab",
-  ],
-  setup(props, { emit }) {
-    const {
-      idForContent,
-      idLocal,
-      isActive,
-    } = ATabAPI(props);
-
-    const tab = toRef(props, "tab");
-    const onChangeTabLocal = $event => {
-      if (tab.value.disabled) {
-        return;
-      }
-      emit("changeTab", { $event, tab: tab.value });
-    };
-
-    const tabindexLocal = computed(() => {
-      return tab.value.disabled ? -1 : 0;
-    });
-
-    const onKeydown = $event => {
-      if ($event.keyCode === AKeysCode.enter ||
-        $event.keyCode === AKeysCode.space) {
-        onChangeTabLocal($event);
-        $event.stopPropagation();
-        $event.preventDefault();
-      }
-    };
-
-    return {
-      idForContent,
-      idLocal,
-      isActive,
-      onChangeTabLocal,
-      onKeydown,
-      tabindexLocal,
-    };
-  },
-  render() {
-    return h("li", {
-      class: "a_tabs__list__item",
-    }, [
-      h("a", {
-        id: this.idLocal,
-        class: ["a_tabs__list__link", this.tab.class, {
-          a_tabs__list__link_active: this.isActive,
-          a_tabs__list__link_disabled: this.tab.disabled,
-        }],
-        role: "tab",
-        ariaDisabled: this.tab.disabled,
-        ariaControls: this.idForContent,
-        ariaSelected: this.isActive,
-        tabindex: this.tabindexLocal,
-        onClick: this.onChangeTabLocal,
-        onKeydown: this.onKeydown,
-      }, [
-        this.tab.title && h("span", {
-          class: "a_position_absolute_all",
-          title: this.tab.title,
-          ariaHidden: true,
-        }),
-        withDirectives(h("span"), [
-          [ASafeHtml, this.tab.label],
-        ]),
-      ]),
-    ]);
-  },
-};