aloha-vue 1.0.24 → 1.0.25

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.27",
+    "aloha-css": "1.0.29",
     "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/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,11 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.25",
+    "aloha-css": "1.0.29",
     "lodash-es": "^4.17.21",
     "vue": "3.2.37"
   }

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/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";