feat: add new component

Author: linspw

src/components/molecules/index.js

@@ -6,3 +6,4 @@ export * from './dropdown';
 export * from './stepper';
 export * from './form';
 export * from './steps';
+export * from './tabs';

src/components/molecules/steps/steps.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, ArgsTable, Story, Canvas } from "@storybook/addon-docs";
 import { HSteps, HStep } from "./index.js";
 
 <Meta
-  title="Design System/Molecules/Toast"
+  title="Design System/Molecules/Steps"
   component={HSteps}
   decorators={[
     () => ({

src/components/molecules/tabs/index.js

@@ -0,0 +1,4 @@
+import HTabs from './tabs.vue';
+import HTab from './tab.vue';
+
+export { HTabs, HTab };

src/components/molecules/tabs/tab.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, ArgsTable, Story, Canvas } from "@storybook/addon-docs";
+import { HTabs, HTab } from "./index.js";
+
+<Meta
+  title="Design System/Molecules/Tabs"
+  component={HTabs}
+  decorators={[
+    () => ({
+      template:
+        '<div style="transform: scale(1); height: 40vh;"><story /></div>',
+    }),
+  ]}
+/>
+
+## Tabs
+
+### Default use:
+
+<Canvas>
+  <Story name="Default use">
+    {{
+      data() {
+        return {
+          currentTab: 'first',
+        };
+      },
+      template: `
+          <h-tabs
+            v-model="currentTab"
+          >
+            <h-tab value="first">
+              first
+            </h-tab>
+            <h-tab value="second">
+              second
+            </h-tab>
+            <h-tab
+              value="third"
+              disabled
+            >
+              third
+            </h-tab>
+          </h-tabs>
+        `,
+    }}
+  </Story>
+</Canvas>

src/components/molecules/tabs/tab.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="h-tab"
+    :class="{
+      'h-tab--behavior-active': isCurrentTab,
+      'h-tab--behavior-disabled': $props.disabled,
+    }"
+    @click="handleChange"
+  >
+    {{ label }}<slot />
+  </div>
+</template>
+
+<script setup>
+import { inject, computed } from 'vue';
+import { BTabsKey } from './tabs-key';
+
+const $props = defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+});
+
+const { currentTab, handleTabsChange } = inject(BTabsKey);
+const $emits = defineEmits(['change']);
+
+const handleChange = () => {
+  if ($props.disabled) return;
+  $emits('change', $props.value);
+  handleTabsChange($props.value);
+};
+const isCurrentTab = computed(() => currentTab.value === $props.value);
+</script>
+
+<style lang="scss">
+:root {
+  --h-tab--background-color: var(--color-theme-secondary-800);
+  --h-tab--color: var(--color-theme-white);
+  --h-tab--font-weight: 500;
+}
+
+.h-tab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex:1;
+  text-transform: uppercase;
+  background-color: var(--h-tab--background-color);
+  color: var(--h-tab--color);
+  font-weight: var(--h-tab--font-weight);
+
+  &--behavior {
+    &-disabled {
+      --h-tab--background-color: var(--color-grey-scale-400);
+      --h-tab--color: var(--color-grey-scale-700);
+    }
+  }
+
+  &:not(.h-tab--behavior-active):not(.h-tab--behavior-disabled) {
+    --h-tab--color: var(--color-grey-scale-100);
+  }
+}
+</style>

src/components/molecules/tabs/tabs-key.js

@@ -0,0 +1 @@
+export const BTabsKey = Symbol('BTabsKey');

src/components/molecules/tabs/tabs.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    ref="tab"
+    class="h-tabs"
+  >
+    <slot />
+
+    <div class="h-tabs__line" />
+  </div>
+</template>
+
+<script setup>
+import {
+  provide,
+  computed,
+  reactive,
+  ref,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue';
+import { BTabsKey } from './tabs-key';
+
+const $props = defineProps({
+  modelValue: {
+    type: [Number, String],
+    default: undefined,
+  },
+});
+
+const $emits = defineEmits(['update:modelValue']);
+
+const tab = ref();
+
+const $state = reactive({
+  lineWidth: undefined,
+});
+
+const updatePositionLine = () => {
+  const tabActiveRect = tab.value.getElementsByClassName('h-tab--behavior-active')?.[0]?.getBoundingClientRect();
+  if (!tabActiveRect) {
+    console.warn('Not found tab.');
+    return;
+  }
+  const tabsWrapperRect = tab.value?.getBoundingClientRect();
+  $state.lineWidth = `${tabActiveRect.width}px`;
+  $state.lineTranslateX = `translateX(${tabActiveRect.left - tabsWrapperRect.left}px)`;
+};
+
+const handleTabsChange = (newValue) => {
+  $emits('update:modelValue', newValue);
+};
+
+watch(() => $props.modelValue, () => {
+  updatePositionLine();
+}, { flush: 'post' });
+
+provide(BTabsKey, { handleTabsChange, currentTab: computed(() => $props.modelValue) });
+
+onMounted(() => {
+  updatePositionLine();
+  window.addEventListener('resize', updatePositionLine, { passive: true });
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updatePositionLine);
+});
+</script>
+
+<style lang="scss">
+.h-tabs {
+  box-shadow: var(--shadow-e-002);
+  width: 100%;
+  min-height: 48px;
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+}
+
+.h-tabs__line {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--color-white);
+  width: v-bind('$state.lineWidth');
+  transform: v-bind('$state.lineTranslateX');
+  transition: transform 0.25s ease-in;
+}
+</style>

src/plugins/core-ui-plugin.js

@@ -32,6 +32,8 @@ import {
   HForm,
   HSteps,
   HStep,
+  HTabs,
+  HTab,
 } from '@components/molecules';
 
 import { ClickOutsidePlugin } from './click-outside-plugin';
@@ -77,6 +79,8 @@ const CoreUIPlugin = {
     Vue.component('HForm', HForm);
     Vue.component('HSteps', HSteps);
     Vue.component('HStep', HStep);
+    Vue.component('HTabs', HTabs);
+    Vue.component('HTab', HTab);
   },
   installPlugins(Vue) {
     Vue.use(ClickOutsidePlugin);