poc(stor-1893): sb tab menu prime

package.json

@@ -28,6 +28,7 @@
   ],
   "dependencies": {
     "@popperjs/core": "^2.11.8",
+    "@vueuse/core": "^10.7.2",
     "click-outside-vue3": "^4.0.1",
     "dayjs": "^1.11.10",
     "dompurify": "^3.0.6",

src/components/TabMenu/SbTabMenu.stories.ts

@@ -0,0 +1,106 @@
+import SbTabMenu from './index'
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+import SbIcon from '../Icon'
+import SbAvatar from '../Avatar'
+
+const defaultItems = [
+  {
+    label: 'Option 1',
+  },
+  {
+    label: 'Option 2',
+  },
+  {
+    label: 'Option Disabled',
+    disabled: true,
+  },
+  {
+    label: 'Option Invisible',
+    visible: false,
+  },
+  {
+    label: 'Customized Option',
+    class: 'sb-custom-class',
+  },
+  {
+    label: 'Option 3',
+  },
+  {
+    label: 'Option 4',
+  },
+  {
+    label: 'Option 5',
+  },
+  {
+    label: 'Option 6',
+  },
+  {
+    label: 'Option 7',
+  },
+] as MenuItem[]
+
+type Story = StoryObj<typeof SbTabMenu>
+
+const meta: Meta<typeof SbTabMenu> = {
+  title: 'Navigation/SbTabMenu',
+  args: {
+    model: defaultItems,
+  },
+  render: (args): unknown => ({
+    components: { SbTabMenu },
+    setup(): Args {
+      return { args }
+    },
+    template: `<SbTabMenu v-bind="args" />`,
+  }),
+}
+
+export default meta
+
+export const Default: Story = {}
+
+export const VerticalMenu: Story = {
+  args: {
+    vertical: true,
+  },
+}
+
+export const LoadingMenu: Story = {
+  args: {
+    isLoading: true,
+  },
+}
+
+export const WithSlot = (): unknown => ({
+  components: { SbTabMenu, SbIcon, SbAvatar },
+  setup(): Args {
+    const model = [
+      {
+        label: 'Option 1',
+        iconLeft: 'chevron-down-circle',
+      },
+      {
+        label: 'Option 2',
+        iconRight: 'search',
+      },
+      {
+        label: 'Option 3',
+        avatar: 'https://avatars.githubusercontent.com/u/6871945?v=4',
+      },
+    ]
+    return { model }
+  },
+  template: `<SbTabMenu :model="model">
+  <template #item="{ item, props }">
+  <a v-bind="props.action" role="menuitem">
+    <p class="custom-slot">
+      <SbAvatar v-if="item.avatar" :src="item.avatar" />
+      <SbIcon v-if="item.iconLeft" :name="item.iconLeft" />
+      {{ item.label }}
+      <SbIcon v-if="item.iconRight" :name="item.iconRight" />
+    </p>
+  </a>
+  </template>
+  </SbTabMenu>`,
+})

src/components/TabMenu/SbTabMenu.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="sb-tab-menu" :class="computedClasses">
+    <template v-if="isLoading">
+      <SbLoading type="placeholder" class="sb-tab-menu__loading">
+        <SbLoadingPlaceholder width="100px" height="24px" />
+        <SbLoadingPlaceholder width="100px" height="24px" />
+        <SbLoadingPlaceholder width="100px" height="24px" />
+      </SbLoading>
+    </template>
+    <template v-else>
+      <slot name="left-slot"></slot>
+      <SbIconButton
+        v-if="showLeftArrow"
+        class="sb-tab-menu__arrow"
+        aria-label="Go to previous tab"
+        icon-name="chevron-left"
+        icon-color="light-gray"
+        @focus="scrollTabs('left')"
+        @mouseover="scrollTabs('left')"
+        @click="scrollTabs('left')"
+      />
+      <PrimeTabMenu
+        ref="tabContainer"
+        v-bind="props"
+        :pt="{
+          root: 'sb-tab-menu__container',
+          menu: 'sb-tab-menu__menu',
+          menuitem: 'sb-tab-menu__menu-item',
+          action: 'sb-tab-menu__action',
+          icon: 'sb-tab-menu__icon',
+          label: 'sb-tab-menu__label',
+          inkbar: 'sb-tab-menu__inkbar',
+          hooks: 'sb-tab-menu__hooks',
+          ...$props.pt,
+        }"
+        unstyled
+        @tab-change="handleTabChange"
+        @update:active-index="handleActiveIndexChange"
+      >
+        <template v-if="$slots.item" #item="{ item, props }">
+          <slot name="item" :item="item" :props="props" />
+        </template>
+      </PrimeTabMenu>
+      <SbIconButton
+        v-if="showRightArrow"
+        class="sb-tab-menu__arrow sb-tab-menu__arrow--right"
+        aria-label="Go to next tab"
+        icon-name="chevron-right"
+        icon-color="light-gray"
+        @focus="scrollTabs('right')"
+        @mouseover="scrollTabs('right')"
+        @click="scrollTabs('right')"
+      />
+      <slot name="right-slot"></slot>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { SbIconButton, SbLoading, SbLoadingPlaceholder } from '..'
+import PrimeTabMenu, { type TabMenuChangeEvent } from 'primevue/tabmenu'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+
+const props = defineProps({
+  model: {
+    type: Array,
+    default: null,
+  },
+  activeIndex: {
+    type: Number,
+    default: 0,
+  },
+  ariaLabelledby: {
+    type: String,
+    default: null,
+  },
+  ariaLabel: {
+    type: String,
+    default: null,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  scrollable: {
+    type: Boolean,
+    default: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  pt: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const emits = defineEmits(['update:activeIndex', 'tab-change'])
+
+// styling computation
+const computedClasses = computed(() => {
+  return {
+    'sb-tab-menu--vertical': props.vertical,
+  }
+})
+
+// methods
+const handleTabChange = (e: TabMenuChangeEvent): void => {
+  emits('tab-change', props.model[e.index])
+}
+
+const handleActiveIndexChange = (e: number): void => {
+  emits('update:activeIndex', e)
+}
+
+// scrolling behaviours
+const tabContainer = ref<HTMLElement | null>(null)
+const containerWidth = ref(0)
+const scrollWidth = ref(0)
+const scrollPosition = ref(0)
+let cleanUpScroll = null
+let cleanUpResize = null
+
+const showTabArrows = computed(() => {
+  return scrollWidth.value >= containerWidth.value && props.scrollable
+})
+
+const showLeftArrow = computed(() => {
+  return (
+    showTabArrows.value && containerWidth.value > 0 && scrollPosition.value > 1
+  )
+})
+
+const showRightArrow = computed(() => {
+  return (
+    showTabArrows.value &&
+    scrollPosition.value + containerWidth.value < scrollWidth.value - 10
+  )
+})
+
+const scrollTabs = (direction: string): void => {
+  const scrollContainer = tabContainer.value?.$el
+
+  if (!scrollContainer) return
+
+  const scrollPosition = scrollContainer.scrollLeft
+  const scrollAmount = Math.floor(scrollWidth.value / 4)
+  const scrollAdd = direction === 'left' ? -scrollAmount : scrollAmount
+  scrollContainer.scrollTo({
+    top: 0,
+    left: scrollPosition + scrollAdd,
+    behavior: 'smooth',
+  })
+}
+
+onMounted(() => {
+  const container = tabContainer.value?.$el
+  containerWidth.value = container?.clientWidth || 0
+  scrollWidth.value = container?.scrollWidth || 0
+  scrollPosition.value = container?.scrollLeft || 0
+
+  cleanUpResize = useResizeObserver(container, () => {
+    containerWidth.value = container?.clientWidth || 0
+    scrollWidth.value = container?.scrollWidth || 0
+  })
+  cleanUpScroll = useEventListener(container, 'scroll', () => {
+    scrollPosition.value = container?.scrollLeft
+  })
+})
+
+onBeforeUnmount(() => {
+  if (typeof cleanUpScroll === 'function') cleanUpScroll()
+  if (typeof cleanUpResize?.stop === 'function') cleanUpResize.stop()
+})
+</script>
+
+<style lang="scss" src="./tab-menu.scss" />

src/components/TabMenu/index.ts

@@ -0,0 +1,3 @@
+import SbTabMenu from './SbTabMenu.vue'
+
+export default SbTabMenu