aloha-vue 1.0.24 → 1.0.27

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.27",
+    "aloha-css": "1.0.31",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

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

@@ -88,6 +88,11 @@ export default {
           name: "PageDropdown",
           label: "Dropdown",
         },
+        {
+          id: "tabs",
+          name: "PageTabs",
+          label: "Tabs",
+        },
       ],
     };
   },

package/docs/src/main.js

@@ -2,7 +2,7 @@ import App from "./App/App.vue";
 import { createApp } from "vue";
 import store from "./store/index";
 import router from "./router/index";
-import i18nPlugin from "../../src/plugins/i18nPlugin";
+import AI18nPlugin from "../../src/plugins/AI18nPlugin";
 // import alohaPlugin from "../src/plugins/alohaPlugin";
 import AIconPlugin from "../../src/plugins/AIconPlugin";
 
@@ -23,7 +23,7 @@ const TRANSLATIONS = {
   hr: { ...hrGlobal, ...hr },
   ru: { ...ruGlobal, ...ru },
 };
-APP.use(i18nPlugin, TRANSLATIONS, "de");
+APP.use(AI18nPlugin, TRANSLATIONS, "de");
 APP.use(AIconPlugin, {
   Plus2: `<svg
     xmlns="http://www.w3.org/2000/svg"

package/docs/src/router/index.js

@@ -99,6 +99,11 @@ const ROUTES = [
     name: "PageDropdown",
     component: () => import(/* webpackChunkName: "PageDropdown" */ "../views/PageDropdown/PageDropdown.vue"),
   },
+  {
+    path: "/tabs",
+    name: "PageTabs",
+    component: () => import(/* webpackChunkName: "PageTabs" */ "../views/PageTabs/PageTabs.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

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

@@ -0,0 +1,30 @@
+import ATabs from "../../../../src/ATabs/ATabs";
+
+export default {
+  name: "PageTabs",
+  components: {
+    ATabs,
+  },
+  data() {
+    return {
+      dataTabs1: [
+        {
+          label: "Tab 1",
+          id: "tab_1",
+          content: "CONTENT 1",
+        },
+        {
+          label: "Tab 2",
+          id: "tab_2",
+          content: "CONTENT 2",
+        },
+        {
+          label: "Tab 3",
+          id: "tab_3",
+          content: "CONTENT 3",
+          disabled: true,
+        },
+      ],
+    };
+  },
+};

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

@@ -0,0 +1,25 @@
+div
+  h1 ATabs
+  a-tabs(
+    :data="dataTabs1"
+  )
+  br
+  a-tabs(
+    :data="dataTabs1"
+    :is-boxed="true"
+  )
+  br
+  a-tabs.a_tabs_small(
+    :data="dataTabs1"
+    :is-boxed="true"
+  )
+  br
+  a-tabs.a_tabs_medium(
+    :data="dataTabs1"
+    :is-boxed="true"
+  )
+  br
+  a-tabs.a_tabs_large(
+    :data="dataTabs1"
+    :is-boxed="true"
+  )

package/docs/src/views/PageTabs/PageTabs.vue

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

package/docs/styles/styles.scss

@@ -1,18 +1,3 @@
-html {
-  box-sizing: border-box;
-}
-
-*, ::after, ::before {
-  box-sizing: inherit;
-}
-
-body {
-  margin: 0;
-}
-
-.a_search_highlight {
-  color: red;
-}
 @import "./node_modules/aloha-css/sass/aloha";
 
 @import "../src/styles/styles";

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.24",
+  "version": "1.0.27",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.25",
+    "aloha-css": "1.0.35",
+    "axios": "^0.27.2",
     "lodash-es": "^4.17.21",
     "vue": "3.2.37"
   }

package/src/AIcon/AIcon.js

@@ -22,6 +22,7 @@ import DoubleAngleRight from "./Icons/DoubleAngleRight";
 import DoubleAngleUp from "./Icons/DoubleAngleUp";
 import EyeClose from "./Icons/EyeClose";
 import EyeOpen from "./Icons/EyeOpen";
+import Home from "./Icons/Home";
 import Lock from "./Icons/Lock";
 import Minus from "./Icons/Minus";
 import Ok from "./Icons/Ok";
@@ -73,6 +74,7 @@ export default {
       DoubleAngleUp,
       EyeClose,
       EyeOpen,
+      Home,
       Lock,
       Minus,
       Ok,

package/src/AIcon/Icons/Home.js

@@ -0,0 +1,10 @@
+export default `<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="18" 
+  height="18" 
+  viewBox="0 0 1024 1024"
+>
+  <path 
+    d="M861.742 548.161l-349.742-303.724-349.727 303.724c-9.197 7.897-18.407 15.778-18.407 35.498v353.679c0 15.778 13.151 28.927 28.927 28.927h219.57v-277.427c0-15.778 11.837-27.602 27.602-27.602h184.073c15.778 0 27.602 11.837 27.602 27.602v278.735h219.57c15.778 0 28.927-13.151 28.927-28.927l-0.011-353.679c0-21.042-10.499-28.913-18.393-36.802zM1014.246 486.361l-178.803-156.467v-163.022c0-15.778-13.151-28.927-28.927-28.927h-47.337c-15.778 0-28.927 13.151-28.927 28.927v72.315l-198.514-174.876c-11.837-10.51-26.304-10.51-38.123 0l-483.848 422.052c-11.837 10.51-13.151 28.927-2.642 40.756l31.558 35.498c10.51 11.837 28.927 13.151 40.756 2.642l432.558-378.654 432.558 378.654c11.837 10.51 30.239 9.197 40.756-2.642l31.558-35.498c10.51-11.849 9.211-30.239-2.639-40.756z"
+  ></path>
+</svg>`;

package/src/AIcon/SVG-icons/home.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+    <path d="M861.742 548.161l-349.742-303.724-349.727 303.724c-9.197 7.897-18.407 15.778-18.407 35.498v353.679c0 15.778 13.151 28.927 28.927 28.927h219.57v-277.427c0-15.778 11.837-27.602 27.602-27.602h184.073c15.778 0 27.602 11.837 27.602 27.602v278.735h219.57c15.778 0 28.927-13.151 28.927-28.927l-0.011-353.679c0-21.042-10.499-28.913-18.393-36.802zM1014.246 486.361l-178.803-156.467v-163.022c0-15.778-13.151-28.927-28.927-28.927h-47.337c-15.778 0-28.927 13.151-28.927 28.927v72.315l-198.514-174.876c-11.837-10.51-26.304-10.51-38.123 0l-483.848 422.052c-11.837 10.51-13.151 28.927-2.642 40.756l31.558 35.498c10.51 11.837 28.927 13.151 40.756 2.642l432.558-378.654 432.558 378.654c11.837 10.51 30.239 9.197 40.756-2.642l31.558-35.498c10.51-11.849 9.211-30.239-2.639-40.756z"></path>
+</svg>

package/src/ATabs/ATabs.js

@@ -0,0 +1,144 @@
+import {
+  h,
+  ref,
+  toRef,
+  watch,
+} from "vue";
+
+import ATabsContent from "./ATabsContent";
+import ATabsTab from "./ATabsTab";
+
+import {
+  forEach,
+  get,
+  isNil,
+  isUndefined,
+  uniqueId,
+} from "lodash-es";
+
+export default {
+  name: "ATabs",
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId("a_tabs_"),
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    idForActiveTab: {
+      type: [String, Number],
+      required: false,
+      default: undefined,
+    },
+    keyId: {
+      type: String,
+      required: false,
+      default: "id",
+    },
+    isChangeOutside: {
+      type: Boolean,
+      required: false,
+    },
+    isBoxed: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  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;
+      }
+    });
+
+    initTabActiveId();
+
+    return {
+      idForActiveTabLocal,
+      onChangeTab,
+    };
+  },
+  render() {
+    return h("div", {
+      id: this.id,
+      class: ["a_tabs", {
+        a_tabs_boxed: this.isBoxed,
+      }],
+    }, [
+      h("div", {
+        class: "a_tabs__box",
+      }, [
+        h("ul", {
+          class: "a_tabs__list",
+          role: "tablist",
+        }, [
+          this.data.map((tab, tabIndex) => {
+            return h(ATabsTab, {
+              key: tabIndex,
+              tab,
+              index: tabIndex,
+              parentId: this.id,
+              idForActiveTab: this.idForActiveTabLocal,
+              keyId: this.keyId,
+              onChangeTab: this.onChangeTab,
+            });
+          }),
+        ]),
+      ]),
+      h("div", {
+        class: "a_tabs__contents",
+      }, [
+        this.data.map((tab, tabIndex) => {
+          return h(ATabsContent, {
+            key: tabIndex,
+            tab,
+            index: tabIndex,
+            parentId: this.id,
+            keyId: this.keyId,
+            idForActiveTab: this.idForActiveTabLocal,
+          }, this.$slots);
+        }),
+      ]),
+    ]);
+  },
+};

package/src/ATabs/ATabsContent.js

@@ -0,0 +1,62 @@
+import {
+  h,
+} from "vue";
+
+import ATabAPI from "./compositionAPI/ATabAPI";
+
+export default {
+  name: "ATabsContent",
+  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,
+    },
+  },
+  setup(props) {
+    const {
+      idForContent,
+      idLocal,
+      isActive,
+    } = ATabAPI(props);
+
+    return {
+      idForContent,
+      idLocal,
+      isActive,
+    };
+  },
+  render() {
+    return h("div", {
+      id: this.idForContent,
+      role: "tabpanel",
+      class: ["a_tabs__content", {
+        a_tabs__content_show: this.isActive,
+      }],
+      ariaLabelledby: this.idLocal,
+    }, [
+      this.tab.slotContent ?
+        this.$slots[this.tab.slotContent] &&
+          this.$slots[this.tab.slotContent]({ tab: this.tab }) :
+        this.tab.content &&
+          h("div", {
+            innerHTML: this.tab.content,
+          }),
+    ]);
+  },
+};

package/src/ATabs/ATabsTab.js

@@ -0,0 +1,104 @@
+import {
+  computed,
+  h,
+  toRef,
+} from "vue";
+
+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,
+        }),
+        h("span", {
+          innerHTML: this.tab.label,
+        })
+      ]),
+    ]);
+  },
+};

package/src/ATabs/compositionAPI/ATabAPI.js

@@ -0,0 +1,37 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  get,
+} from "lodash-es";
+
+export default function ATabAPI(props) {
+  const parentId = toRef(props, "parentId");
+  const index = toRef(props, "index");
+  const idLocal = computed(() => {
+    return `${ parentId.value }_${ index.value }`;
+  });
+
+  const idForContent = computed(() => {
+    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,
+    isActive,
+  };
+}

package/src/compositionAPI/AHttpAPI.js

@@ -0,0 +1,363 @@
+import {
+  ref,
+} from "vue";
+
+import axios from "axios";
+import {
+  forEach,
+  isArray,
+  isFunction,
+  isNil,
+  isPlainObject,
+  keyBy,
+} from "lodash-es";
+
+
+const BASE_URL = ref("/api/");
+const API = ref(axios.create());
+const API_SAVED = ref({});
+const ERROR_CALLBACKS = ref({});
+
+export function create({ axiosCreateOptions = {} }) {
+  API.value = axios.create(axiosCreateOptions);
+}
+
+export function setBaseUrl({ baseUrl = "" }) {
+  BASE_URL.value = baseUrl;
+}
+
+export function setErrorCallbacks({ errorCallbacks = {} }) {
+  ERROR_CALLBACKS.value = errorCallbacks;
+}
+
+export default function AHttpAPI() {
+  const checkErrorStatus = ({ error, showError, client, resolve, reject }) => {
+    if (!error) {
+      return true;
+    }
+    const ERROR_CALLBACK = () => {
+      const CALLBACK = ERROR_CALLBACKS[error.status];
+      if (isFunction(CALLBACK)) {
+        return CALLBACK({ error, showError, client, resolve, reject });
+      }
+    };
+
+    ERROR_CALLBACK();
+    // Let the promise handle the error
+    return true;
+  };
+
+  const callHttpRequestAndCheckSavedApi = ({
+    methodHttp,
+    url,
+    urlParams,
+    data,
+    headerParams,
+    responseType = "json",
+    apiSaveId,
+    keyId,
+    fullResponse,
+    showError = false,
+    expectedList
+  }) => {
+    let apiSavedData = undefined;
+    if (apiSaveId) {
+      apiSavedData = API_SAVED.value[apiSaveId];
+      if (apiSavedData) {
+        if (apiSavedData.loading) {
+          return apiSavedData.promise;
+        }
+      }
+    }
+
+    const PROMISE = new Promise((resolve, reject) => {
+      if (apiSavedData) {
+        if (!apiSavedData.loading) {
+          if (keyId) {
+            if (apiSavedData.keyData) {
+              return resolve(apiSavedData.keyData);
+            }
+            const KEY_DATA = setKeyData({ data: apiSavedData.data, keyId });
+            API_SAVED.value[apiSaveId].keyData = KEY_DATA;
+            return resolve(KEY_DATA);
+          }
+          return resolve(apiSavedData.data);
+        }
+      }
+      const URL_NEW = setUrlWithParams({ url, params: urlParams });
+      let url_full = `${ BASE_URL.value }${ URL_NEW }`;
+      url_full = url_full.replace(/\/\//g, "/");
+      API.value({
+        method: methodHttp,
+        url: url_full,
+        data,
+        headers: headerParams,
+        responseType,
+      }).then(
+        response => {
+          if (fullResponse) {
+            return resolve(response);
+          }
+          const DATA = checkedExpectedList({ expectedList, response });
+          const KEY_DATA = setKeyData({ data: DATA, keyId });
+          if (apiSaveId) {
+            API_SAVED.value[apiSaveId].data = DATA;
+            API_SAVED.value[apiSaveId].keyData = KEY_DATA;
+            API_SAVED.value[apiSaveId].loading = false;
+          }
+          if (keyId) {
+            return resolve(KEY_DATA);
+          }
+          return resolve(DATA);
+        },
+        error => {
+          if (checkErrorStatus({ error: error.response, showError, client: API, reject, resolve })) {
+            return reject(error.response);
+          }
+        }
+      );
+    });
+
+    if (!apiSavedData) {
+      API_SAVED.value[apiSaveId] = API_SAVED.value[apiSaveId] || {};
+      API_SAVED.value[apiSaveId].loading = true;
+      API_SAVED.value[apiSaveId].promise = PROMISE;
+    }
+
+    return PROMISE;
+  };
+
+  function getHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    apiSaveId,
+    keyId,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "get",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      apiSaveId,
+      keyId,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function getListHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    apiSaveId,
+    keyId,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "get",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      apiSaveId,
+      keyId,
+      fullResponse,
+      showError,
+      expectedList: true,
+    });
+  }
+
+  function getOptionsHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    keyId,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "options",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      keyId,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function postHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "post",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function putHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "put",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function patchHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "patch",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  function deleteHttp({
+    url,
+    data,
+    urlParams = {},
+    headerParams,
+    responseType,
+    fullResponse,
+    showError,
+  }) {
+    return callHttpRequestAndCheckSavedApi({
+      methodHttp: "delete",
+      url,
+      urlParams,
+      data,
+      headerParams,
+      responseType,
+      fullResponse,
+      showError,
+    });
+  }
+
+  return {
+    deleteHttp,
+    getHttp,
+    getListHttp,
+    getOptionsHttp,
+    patchHttp,
+    postHttp,
+    putHttp,
+  };
+}
+
+export function setUrlWithParams({ url, params }) {
+  const URL = url || "";
+  let urlParams = "";
+  forEach(params, (value, key) => {
+    if (isArray(value)) {
+      urlParams = setUrlForArray({ id: key, array: value, url: urlParams });
+    } else if (isPlainObject(value)) {
+      forEach(value, (v, k) => {
+        if (v) {
+          if (urlParams) {
+            urlParams += "&";
+          }
+          urlParams += `${ k }=${ v }`;
+        }
+      });
+    } else if (!isNil(value)) {
+      if (urlParams) {
+        urlParams += "&";
+      }
+      urlParams += `${ key }=${ value }`;
+    }
+  });
+  const prefix = urlParams && URL ? URL.indexOf("?") === -1 ? "?" : "&" : "";
+
+  return `${ URL }${ prefix }${ urlParams }`;
+}
+
+export function setUrlForArray({ array, url, id }) {
+  if (!array.length) {
+    return url;
+  }
+  let URL = url || "";
+  if (id === "fields") {
+    if (URL) {
+      URL += "&";
+    }
+    URL += `${ id }=`;
+    URL += array.join(",");
+  } else {
+    forEach(array, v => {
+      if (URL) {
+        URL += "&";
+      }
+      URL += `${ id }=${ v }`;
+    });
+  }
+  return URL;
+}
+
+function setKeyData({ data, keyId }) {
+  if (!keyId) {
+    return undefined;
+  }
+  return keyBy(data, keyId);
+}
+
+function checkedExpectedList({ expectedList, response }) {
+  if (expectedList) {
+    if (isArray(response.data)) {
+      return response.data;
+    }
+    return response.data.results ? response.data.results : [];
+  }
+  return response.data;
+}

package/src/plugins/AHttpPlugin.js

@@ -0,0 +1,12 @@
+import {
+  create,
+  setBaseUrl, setErrorCallbacks,
+} from "../compositionAPI/AHttpAPI";
+
+export default {
+  install: (app, { axiosCreateOptions = {}, baseUrl = "/api/", errorCallbacks = {} } = {}) => {
+    create({ axiosCreateOptions });
+    setBaseUrl({ baseUrl });
+    setErrorCallbacks({ errorCallbacks });
+  },
+};

package/src/styles/components/ADropdown.scss

@@ -17,14 +17,14 @@
   --a_dropdown_padding_y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
   --a_dropdown_font_size: 1rem;
-  --a_dropdown_color: var(--a_body_color);
+  --a_dropdown_color: var(--a_color_text);
   --a_dropdown_bg: #fff;
   --a_dropdown_border_color: var(--a_border_color);
   --a_dropdown_border_radius: var(--a_border_radius);
   --a_dropdown_border_width: var(--a_border_width);
   --a_dropdown_divider_color: var(--a_color_gray_500);
   --a_dropdown_divider_margin_y: 0.5rem;
-  --a_dropdown_link_color: var(--a_body_color);
+  --a_dropdown_link_color: var(--a_color_text);
   --a_dropdown_link_hover_color: #1e2125;
   --a_dropdown_link_hover_bg: var(--a_color_gray_200);
   --a_dropdown_link_active_color: #fff;

package/src/styles/components/ATabs.scss

@@ -0,0 +1,146 @@
+.a_tabs {
+  --a_tabs_border_width: var(--a_border_width);
+  --a_tabs_border_color: var(--a_border_color);
+  --a_tabs_link_border_width: var(--a_border_width);
+  --a_tabs_link_border_color: transparent transparent var(--a_border_color) transparent;
+  --a_tabs_link_color: var(--a_color_text);
+  --a_tabs_link_bg: inherit;
+  --a_tabs_link_padding_x: 1rem;
+  --a_tabs_link_padding_y: .5rem;
+  --a_tabs_link_cursor: pointer;
+  --a_tabs_font_size: 1rem;
+  --a_tabs_border_radius: var(--a_border_radius);
+  --a_tabs_link_color_active: var(--a_color_primary);
+  --a_tabs_boxed_link_active_border_color: var(--a_border_color) var(--a_border_color) var(--a_color_white) var(--a_border_color);
+  --a_tabs_boxed_link_active_bg: var(--a_color_white);
+  --a_tabs_boxed_link_active_color: var(--a_color_primary);
+  // hover
+  --a_tabs_botom_hover_color: var(--a_color_gray_700);
+  --a_tabs_link_hover_color: var(--a_color_gray_900);
+  --a_tabs_focus_color: var(--a_color_focus);
+  --a_tabs_boxed_link_bg_hover: var(--a_color_gray_100);
+
+  // disabled
+  --a_tabs_link_disabled_cursor: default;
+  --a_tabs_link_disabled_border_color: transparent transparent var(--a_border_color) transparent;
+  --a_tabs_link_disabled_color: var(--a_color_gray_600);
+  --a_tabs_link_disabled_bg: inherit;
+
+  padding: .5rem;
+}
+.a_tabs_small {
+  --a_tabs_font_size: .75rem;
+  --a_tabs_link_padding_x: 0.75rem;
+  --a_tabs_link_padding_y: 0.375rem;
+}
+.a_tabs_medium {
+  --a_tabs_font_size: 1.25rem;
+  --a_tabs_link_padding_x: 1.25rem;
+  --a_tabs_link_padding_y: 0.625rem;
+}
+.a_tabs_large {
+  --a_tabs_font_size: 1.5rem;
+  --a_tabs_link_padding_x: 1.5rem;
+  --a_tabs_link_padding_y: 0.75rem;
+}
+.a_tabs__box {
+  align-items: stretch;
+  display: flex;
+  font-size: var(--a_tabs_font_size);
+  justify-content: space-between;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.a_tabs__list {
+  list-style: none;
+  align-items: center;
+  border-bottom-color: var(--a_tabs_border_color);
+  border-bottom-style: solid;
+  border-bottom-width: var(--a_tabs_border_width);
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  padding: 0;
+  margin: 0;
+}
+.a_tabs__list__item {
+  display: block;
+}
+.a_tabs__list__link {
+  align-items: center;
+  border-width: var(--a_tabs_link_border_width);
+  border-color: var(--a_tabs_link_border_color);
+  border-style: solid;
+  color: var(--a_tabs_link_color);
+  display: flex;
+  justify-content: center;
+  margin-bottom: calc(-1 * var(--a_tabs_border_width));
+  padding: var(--a_tabs_link_padding_y) var(--a_tabs_link_padding_x);
+  vertical-align: top;
+  background-color: var(--a_tabs_link_bg);
+  position: relative;
+  cursor: var(--a_tabs_link_cursor);
+  border-radius: var(--a_tabs_border_radius) var(--a_tabs_border_radius) 0 0;
+  &:hover {
+    --a_tabs_link_border_color: transparent transparent var(--a_tabs_botom_hover_color) transparent;
+    --a_tabs_link_color: var(--a_tabs_link_hover_color);
+  }
+  &:focus {
+    box-shadow: inset 0 0 1px 3px var(--a_tabs_focus_color);
+    outline: none;
+  }
+}
+.a_tabs__list__link_active {
+  --a_tabs_link_border_color: transparent transparent var(--a_color_primary) transparent;
+  --a_tabs_link_color: var(--a_tabs_link_color_active);
+  z-index: 1;
+  &:hover {
+    --a_tabs_link_color: var(--a_tabs_link_color_active);
+  }
+}
+
+.a_tabs_boxed {
+
+  //.a_tabs__list__link {
+  //  &:hover {
+  //    --a_tabs_link_bg: var(--a_tabs_boxed_link_bg_hover);
+  //  }
+  //
+  //  //&:focus,
+  //  //.a_tabs__list__item_active &:focus {
+  //  //
+  //  //}
+  //}
+  .a_tabs__list__link:hover {
+    --a_tabs_link_bg: var(--a_tabs_boxed_link_bg_hover);
+  }
+  .a_tabs__list__link_active {
+    --a_tabs_link_border_color: var(--a_tabs_boxed_link_active_border_color);
+    --a_tabs_link_bg: var(--a_tabs_boxed_link_active_bg);
+  }
+}
+
+.a_tabs {
+  & .a_tabs__list__link_disabled,
+  &.a_tabs_boxed .a_tabs__list__link_disabled {
+    --a_tabs_link_cursor: var(--a_tabs_link_disabled_cursor);
+    --a_tabs_link_border_color: var(--a_tabs_link_disabled_border_color);
+    --a_tabs_link_color: var(--a_tabs_link_disabled_color);
+    --a_tabs_link_bg: var(--a_tabs_link_disabled_bg);
+    box-shadow: none;
+  }
+}
+.a_tabs__contents {
+  border: var(--a_tabs_border_width) solid var(--a_tabs_border_color);
+  margin-top: -1px;
+}
+.a_tabs__content {
+  padding: var(--a_tabs_link_padding_y) var(--a_tabs_link_padding_x);
+  display: none;
+}
+.a_tabs__content_show {
+  display: block;
+}

package/src/styles/styles.scss

@@ -1,5 +1,10 @@
+.a_search_highlight {
+  color: red;
+}
+
 @import "components/AIcon";
 @import "components/ADropdown";
 @import "components/AResizer";
 @import "components/ui/ui";
 @import "components/ATable";
+@import "components/ATabs";